一、基础知识
鼠标指针样式是指鼠标所在位置在屏幕上呈现的图形，通过CSS可以轻松实现鼠标指针的改变，其中常见的鼠标指针样式有：默认（default）、手型（pointer）、等待（wait）、移动（move）等。
在CSS中，使用cursor属性定义鼠标指针样式。
selector {
cursor: value;
}
其中，selector为需要改变样式的元素选择器，value为指针样式的值。
CSS3中新增了一种自定义鼠标指针样式的方法，使用url()函数可以将自定义图片作为鼠标指针。
selector {
cursor: url('custom.cur'), auto;
}
二、改变鼠标指针样式
1、默认
默认鼠标指针样式是指鼠标所在位置呈现的箭头图形。默认样式是默认情况下使用的，因此不需要任何调整。
2、手型
手型鼠标指针样式是指鼠标所在位置呈现的手形图标，通常用于超链接、按钮等元素上的悬停状态。
a:hover {
cursor: pointer;
}
上述代码会在鼠标悬停在超链接时将鼠标指针变为手型。
3、等待
等待鼠标指针样式是指鼠标所在位置呈现的旋转图标，通常用于需要预加载的页面元素上。
loading-element {
cursor: wait;
}
将需要等待的元素的鼠标指针样式设为等待即可。
4、移动
移动鼠标指针样式是指鼠标所在位置呈现的移动图标，通常用于鼠标悬停在可以拖拽的元素上。
drag-element {
cursor: move;
}
将需要拖拽的元素的鼠标指针样式设为移动即可。
三、自定义鼠标指针样式
1、自定义图片
可以使用url函数将自定义图片作为鼠标指针样式。
custom-element {
cursor: url('custom.cur'), auto;
}
将需要自定义的元素的鼠标指针设为自定义图片即可。
2、多个自定义鼠标指针
可以使用一个包含多个自定义鼠标指针的.cur文件，并设置不同的索引，实现多个鼠标指针之间的切换。
custom-element {
cursor: url('multiple.cur') 0 0, auto;
}
其中，0 0为第一个索引值，根据需要可以设置不同的值进行切换。
四、总结
通过CSS，可以轻松地改变鼠标指针样式，实现页面效果的优化，提升用户体验。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/286925.html
微信扫一扫 
支付宝扫一扫 