Css cursor设置成光标

在CSS中，可以使用cursor属性来设置鼠标光标的样式。以下是一些常用的光标样式以及它们的值：

• default - 默认光标（通常是一个箭头）

• none - 不显示光标

• context-menu - 右键菜单光标

• help - 帮助光标（通常是一个问号）

• pointer - 指针光标（通常用于链接）

• progress - 加载光标（通常是一个沙漏或圆形加载符号）

• wait - 等待光标（通常是一个沙漏）

• cell - 十字箭头光标

• crosshair - 十字箭头光标

• text - 文本输入光标（通常是一个I形光标）

• vertical-text - 垂直文本输入光标

• alias - 别名光标（文本光标的另一种表示）

• copy - 复制光标（通常是一个复制符号）

• move - 移动光标（通常是一个移动符号）

• no-drop - 无法放置光标（通常是一个禁止符号）

• not-allowed - 不允许光标（通常是一个禁止符号）

• all-scroll - 三角方向标（通常用于上下左右移动）

• col-resize - 列式resize光标（通常是左右箭头）

• row-resize - 行式resize光标（通常是上下箭头）

• n-resize - 北（上）方resize光标（通常是一个向上的箭头）

• e-resize - 东（右）方resize光标（通常是一个向右的箭头）

• s-resize - 南（下）方resize光标（通常是一个向下的箭头）

• w-resize - 西（左）方resize光标（通常是一个向左的箭头）

• ne-resize - 东北（右上）方resize光标（通常是一个向右上的箭头）

• nw-resize - 西北（左上）方resize光标（通常是一个向左上的箭头）

• se-resize - 东南（右下）方resize光标（通常是一个向右下的箭头）

• sw-resize - 西南（左下）方resize光标（通常是一个向左下的箭头）

• auto - 默认光标，由浏览器根据上下文确定

如果要将光标设置成一个自定义图像，可以使用url函数指定图像路径：

 

.custom-cursor {
  cursor: url('path/to/cursor/image.cur'), auto;
}

　　请注意，.cur文件是Windows系统的光标文件格式，而大多数现代浏览器支持的是.png或.gif等格式。如果你使用的是.png或.gif，你可以直接指定图像路径：

.custom-cursor {
  cursor: url('path/to/cursor/image.png'), auto;
}

 

　　在实际使用中，你可以将cursor属性应用到任何需要改变光标样式的CSS选择器上。例如，将一个类应用到一个元素上来改变其光标样式：

?

1	<div class="cursor-example">鼠标悬停我试试</div>

　　

?

1 2 3

.cursor-example {   cursor: pointer; }

　　这段代码会将鼠标悬停在.cursor-example元素上时的光标样式设置为pointer。