CSS 鼠标指针

在前端开发中，鼠标指针是用户和网站之间的直接“接触”点，有时候可以通过改变鼠标指针的样式来传达一些信息，增强用户体验。在 CSS 中，我们可以通过一些简单的样式改变来实现。

改变鼠标的样式

在 CSS 中，我们可以使用 cursor 属性来改变鼠标指针的样式。比如，我们可以将鼠标指针改为手形：

button {
  cursor: pointer;
}

这里我们将按钮的 cursor 属性设置为 pointer，表示当用户用鼠标移到按钮上时，鼠标指针将变成手形。

除了 pointer，还有许多其他的值可以设置。常用的值包括：

• default：默认的鼠标指针样式；
• help：帮助光标；
• wait：等待光标，表示正在加载；
• text：文本光标，表示可以选择文本；
• move：移动光标，表示可以移动元素；
• not-allowed：禁止光标，表示无法进行操作。

a {
  cursor: help;
}

input[type=submit] {
  cursor: wait;
}

p {
  cursor: text;
}

img {
  cursor: move;
}

button[disabled] {
  cursor: not-allowed;
}

自定义鼠标指针样式

除了使用预定义的鼠标指针样式外，我们还可以通过 CSS 自定义鼠标指针的样式。这需要用到 url() 函数和 auto 关键字。

body {
  cursor: url("custom-cursor.png"), auto;
}

上述代码中，我们使用 url() 函数引入一个图片文件作为鼠标指针，同时将 cursor 属性的值设置为 auto。这样当用户将鼠标移到页面上时，鼠标指针就会变成自定义的图片。

需要注意的是，这里使用的图片必须是一个单色的、透明背景的 png 图片，以确保能够正确显示。

总结

鼠标指针样式虽然看起来很小，但可以为网站带来一些视觉上的变化，提升用户体验和交互性。CSS 中提供了许多预定义的鼠标指针样式供开发者使用，同时也支持自定义鼠标指针样式。