CSS鼠标样式(cursor)属性用于控制鼠标在不同元素上的形状。它可以帮助你通过更改鼠标外观来增强用户交互和体验。简言之,你可以通过cursor属性更改整个网页上不同区域内光标的样式。
cursor属性在CSS中非常灵活,支持各种值。以下是其中一些最常见的值:
.cursor { cursor: auto; cursor: default; cursor: pointer; cursor: text; cursor: move; cursor: not-allowed; }
auto: 默认情况下,浏览器决定显示什么样的鼠标指针。
default: 浏览器显示默认的光标,通常是一个箭头。
pointer: 当鼠标指针移动到元素上方时,显示手形光标。
text: 当鼠标位于可编辑的文本区域中时,将显示文本插入光标。
move: 当鼠标移到可拖动元素上时,将显示移动光标。
not-allowed: 当鼠标悬停在禁止状态下的元素上时,将显示禁止光标。
当然,您也可以使用外部图像替换cursor值来创建自定义光标。这种方法是使用CSS的URL属性简单地指定外部图像文件。
.custom-cursor { cursor: url('example.png'), auto; }
鉴于光标对用户体验的重要性,我们强烈建议您使用cursor属性来控制页面上的鼠标样式。