一、cursor属性概述

cursor属性是CSS中一种比较常用的样式属性，它用于指定鼠标在元素上的样式。经常看到一些网站的鼠标在移动到某个区域时会变成手形、钻石形等，这些都是借助cursor属性实现的。 cursor属性主要用于改变鼠标指针的外观，能够为网页增加动态和趣味性，提升用户体验。

二、基本语法

cursor属性的属性值包含四类：关键字、URL、功能符号和自定义值。下面是一些常见的关键字：

    /* 鼠标指针 */
    cursor: auto; /* 默认 */
    cursor: default; /* 默认 */
    cursor: pointer; /* 链接 */
    cursor: move; /* 移动 */
    cursor: text; /* 文本 */
    cursor: wait; /* 等待 */
    cursor: help; /* 帮助 */
    cursor: progress; /* 加载 */
    /* 精确位置 */
    cursor: context-menu; /* 上下文菜单 */
    cursor: cell; /* 单元格 */
    cursor: vertical-text; /* 竖排文本 */
    /* 拖放 */
    cursor: alias; /* 链接 */
    cursor: copy; /* 复制 */
    cursor: none; /* 不显示 */

三、cursor属性的作用范围

cursor属性可以应用于任何元素，包括链接、表格单元格和用CSS实现的手型、箭头、物体等。下面是一个例子，当鼠标移动到元素上时，鼠标指针会变成指向左侧的箭头：

    <style>
    .arrow {
        cursor: w-resize;
        width: 100px;
        height: 100px;
        background-color: blueviolet;
    }
    </style>
    <div class="arrow"></div>

四、URL属性值

URL属性值用于指定自定义的鼠标指针。下面是一个例子，当鼠标移动到元素上时，鼠标指针会变成杯子的形状：

    <style>
    .mug {
        cursor: url("mug.cur"), default;
        width: 100px;
        height: 100px;
        background-color: cornflowerblue;
    }
    </style>
    <div class="mug"></div>

五、功能符号

cursor属性还可以使用功能符号，比如zoom-in、zoom-out等。下面是一个例子，当鼠标移动到元素上时，鼠标指针会变成放大镜的形状：

    <style>
    .glass {
        cursor: zoom-in;
        width: 100px;
        height: 100px;
        background-color: hotpink;
    }
    </style>
    <div class="glass"></div>

六、cursor属性的继承性

cursor属性是可以被继承的。也就是说，它可以被父元素继承到子元素中。举个例子，下面的代码中，所有的段落和链接都会继承父元素的cursor属性值，并且默认值为pointer：

    <style>
    body {
        cursor: pointer;
    }
    </style>
    <body>
        <p>鼠标指针会变成手形</p>
        <a href="#">鼠标指针会变成手形</a>
    </body>

七、cursor属性的浏览器兼容性

cursor属性在几乎所有现代浏览器中都有良好的支持，但在一些旧版浏览器中仅支持部分关键字。建议在使用cursor属性时，对于关键字的使用要慎重，最好只使用所有浏览器都支持的关键字。

八、小结

cursor属性是实现鼠标指针样式改变和动态效果的一种重要方式，它具有良好的兼容性，但是要注意浏览器的差异性和关键字的使用。在实际开发中，合理地运用cursor属性，可以提高用户体验，增加网页的趣味性。

CSS cursor属性详解