CSS cursor属性用于设置鼠标指针在元素上的形状。在Web开发中，鼠标指针形状的变化可以提供更好的用户交互体验。
一、默认值
当没有设置cursor属性时，鼠标指针将使用浏览器默认的形状，通常为箭头形状（”default”）。
/* 示例 */
div {
/* 不设置cursor属性 */
}
二、常用值
1、指针形状
使用”pointer”可以将鼠标指针形状变为手形，表示元素是可点击的。
/* 示例 */
button {
cursor: pointer;
}
2、文本形状
使用”text”可以将鼠标指针形状变为文本输入形状，表示元素可以进行文本输入。
/* 示例 */
input[type="text"] {
cursor: text;
}
3、移动形状
使用”move”可以将鼠标指针形状变为4向箭头，表示元素可以被拖动。
/* 示例 */
div {
cursor: move;
}
三、其他值
1、禁止形状
使用”not-allowed”可以将鼠标指针形状变为圆圈加斜杠，表示元素不可用或不可点击。
/* 示例 */
button:disabled {
cursor: not-allowed;
}
2、等待形状
使用”wait”可以将鼠标指针形状变为沙漏形状，表示元素正在等待加载或处理数据。
/* 示例 */
button.loading {
cursor: wait;
}
3、放大形状
使用”zoom-in”可以将鼠标指针形状变为放大镜形状，表示元素可以放大查看。
/* 示例 */
img {
cursor: zoom-in;
}
4、收缩形状
使用”zoom-out”可以将鼠标指针形状变为缩小镜形状，表示元素可以缩小查看。
/* 示例 */
img {
cursor: zoom-out;
}
总结
cursor属性可以为我们的用户交互体验提供更多的可能，期望大家在实际应用中能够更好的运用这一属性。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/294138.html
微信扫一扫 
支付宝扫一扫 