更改光标 - CSS

CSS提供了更改光标样式的功能，即将默认的光标样式修改为其他样式，如自定义图标、手型等。

语法

selector {
  cursor: value; 
}

• selector：需要更改光标样式的HTML元素选择器。
• value：光标样式的值。

值

预定义光标样式

• auto：默认的浏览器光标（通常是箭头）。
• default：浏览器默认光标（通常是箭头）。
• none：没有光标。
• context-menu：上下文菜单光标。
• help：帮助光标（通常是问号）。
• pointer：指针光标（通常是手形）。
• progress：进度条光标。
• wait：等待光标（通常是沙漏）。

自定义光标

• url()：指定自定义光标的图片文件路径。

selector {
  cursor: url('example.png');
}

• custom：指定一组自定义光标属性（可用浏览器自定义光标属性）。

selector {
  cursor: grab;
}

• initial：将该属性重置为它的默认值。
• inherit：从父元素继承该属性。

实例

使用预定义样式

下例中将段落元素的光标样式更改为help：

p {
  cursor: help;
}

使用自定义光标

下例中将段落元素的光标样式更改为自定义图片cursor.png：

p {
  cursor: url('cursor.png');
}

使用浏览器默认自定义样式

下例中将按钮元素的光标样式更改为grab：

button {
  cursor: grab;
}

以上是CSS更改光标的介绍。