CSS 悬停指针 - CSS

CSS 悬停指针是指鼠标在元素上时，鼠标指针所显示的样式。在CSS中，我们可以通过 :hover 选择器来设置元素的悬停指针。

语法

下面是 CSS 悬停指针的语法：

selector:hover {
  cursor: value;
}

• selector：要设置悬停指针的元素选择器。
• cursor：指针的样式值。
• value：鼠标指针的样式。

常用的鼠标指针样式

下面列出了常用的鼠标指针样式以及其对应的值：

| 鼠标指针样式 | 值 | | --- | --- | | 默认 | auto | | 文本 | text | | 十字准心 | crosshair | | 手指 | pointer | | 移动 | move | | 禁止符 | not-allowed | | 缩放 | zoom-in zoom-out |

我们可以按照如下的方式来为元素设置悬停指针：

.selector {
  cursor: pointer;
}

.selector:hover {
  cursor: not-allowed;
}

以上代码表示：在 .selector 元素上鼠标指针为手指，当鼠标悬停在该元素上时指针为禁止符。

示例

下面是一个简单的示例：

<div class="box">
  Hover me
</div>

.box {
  width: 100px;
  height: 50px;
  background-color: #EEE;
  text-align: center;
  line-height: 50px;
}

.box:hover {
  background-color: #333;
  color: #FFF;
  cursor: pointer;
}

以上代码表示：当鼠标悬停在 .box 元素上时，该元素的背景色变为黑色，字体颜色变为白色，鼠标指针为手指。

结论

CSS 悬停指针的应用可以大大提升用户体验，在开发Web应用时非常有用。我们可以根据实际情况灵活使用CSS悬停指针来优化页面效果。