光标不是指针 - CSS

在 CSS 中，cursor 属性用来控制元素的鼠标样式，但是它不仅仅是用来控制指针样式的，它还可以控制其他的鼠标样式。在本篇文章中，我们将探讨一下 cursor 属性的一些用法。

基本用法

cursor 属性最常见的用法就是设置指针样式。下面是几个常用的指针样式：

• default：默认指针样式。
• pointer：手形指针样式，表示链接可点击。
• text：文本样式，表示可输入文本。
• move：移动样式，表示可拖动元素。

a {
  cursor: pointer;
}

input[type="text"] {
  cursor: text;
}

.draggable {
  cursor: move;
}

自定义光标

除了使用预定义的指针样式，我们还可以使用自定义的光标。自定义光标可以是任何图片，只需要将图片的 URL 指定为 url() 即可。

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

在上面的例子中，我们同时指定了默认样式为 auto，表示用浏览器默认样式替代自定义光标。

鼠标指向状态

cursor 属性还可以用来指定元素在不同鼠标指向状态下的样式。下面是一些常用的鼠标指向状态样式：

• hover：鼠标指向状态样式。
• active：鼠标点击状态样式。
• focus：元素被选定时的样式。

a:hover {
  cursor: pointer;
  color: red;
}

a:active {
  cursor: pointer;
  color: blue;
}

input:focus {
  cursor: text;
  outline: none;
}

在上面的例子中，我们给 a 标签的 hover 状态设置了指针样式和红色文本颜色；给 a 标签的 active 状态设置了指针样式和蓝色文本颜色；给 input 元素的 focus 状态设置了文本样式和去除默认的外边框样式。

总结

虽然 cursor 属性的主要作用是控制元素的鼠标样式，但它不仅仅是用来控制指针样式的，它还可以控制其他的鼠标样式。我们可以使用预定义的指针样式，也可以使用自定义的光标。此外，我们还可以使用 cursor 属性来控制元素在不同鼠标指向状态下的样式。