如何在悬停时更改 CSS 中的光标 - CSS

当我们把鼠标悬停在某个元素上时，有时需要更改鼠标的光标形状，以便给用户带来更好的交互体验。下面介绍在 CSS 中如何实现这个功能。

CSS 的 cursor 属性

CSS 的 cursor 属性可以用来设置光标的形状。

常用的光标形状如下：

• auto：浏览器自动选择光标。
• pointer：手型光标，表示链接。
• default：默认光标，通常是一个箭头。
• text：文本光标，表示可以输入文本。
• wait：等待光标，表示正在加载。
• move：移动光标，表示可以移动元素。
• help：帮助光标，通常是一个问号。

还有很多其他的光标形状，可以参考 MDN 的文档。

在悬停时更改光标形状

我们可以使用 CSS 的 :hover 伪类来在悬停时更改光标的形状。

例如，下面的代码将在鼠标悬停在 .button 元素时，将光标形状设置为手型：

.button:hover {
  cursor: pointer;
}

总结

在 CSS 中，可以使用 cursor 属性来设置光标的形状，通过 :hover 伪类可以在悬停时更改光标的形状。使用这些技巧可以让页面变得更加友好和易用。