以下是收集并整理了的,目前已发布的所有鼠标指针的样式属性:
auto 浏览器根据元素类型,自动调整鼠标指针 default 默认指针,通常是箭头 none 无指针被渲染 context-menu 指针下有可用内容目录 help 指示帮助 pointer 悬浮于连接上时,通常为手 progress 程序后台繁忙,用户不忙 (与wait 相反) wait 程序繁忙,用户忙着嘞 (与progress 相反)图标一般为沙漏或者表 cell 指示单元格可被选中 crosshair 交叉指针,通常指示位图中的框选 text 指示文字可被选中 vertical-text 指示垂直文字可被选中 alias 复制或快捷方式将要被创建 copy 指示可复制 move 被悬浮的物体可被移动 no-drop 当前位置不能扔下 not-allowed 不能执行 grab 指示可抓取 grabbing 指示抓取中 all-scroll 元素可任意方向滚动 col-resize 元素可被重设宽度,通常被渲染为中间有一条竖线分割的左右两个箭头 row-resize 元素可被重设高度,通常被渲染为中间有一条横线分割的上下两个箭头 n-resize 指示上边将被移动 e-resize 指示右边将被移动 s-resize 指示下边将被移动 w-resize 指示左边将被移动 ne-resize 指示右上角将被移动 nw-resize 指示左上角将被移动 se-resize 指示右下角将被移动 sw-resize 指示左下角将被移动 ew-resize 指示左右重新设置大小 ns-resize 指示上下重新设置大小 nesw-resize 指示一三象限重新设置大小 nwse-resize 指示二四象限重新设置大小 zoom-in 指示可被放大 zoom-out 指示可被缩小
在进行项目优化时,有很多类型不一样的内容。
为了符合用户体验,当光标指到此处,需要相应的鼠标指针进行一个样式的同步变化。
上面是鼠标指针样式属性的所有属性值。但依然有局限性,总不能把这些代码全部记住吧,成本太高了。
所有我一般会使用cursor:auto;这个属性,表示自适应,这个比较友好。
但如果遇到特殊情景,需要用到特殊的鼠标指针,更好,更完美的表达。cursor: url();这将是一个不错的选择。url()里填写插件地址,利用比较优秀的插件的可以获得多种多样的指针样式。这里推荐使用YoloMouse等比较知名的插件。