浏览器内置指针样式:
标了红色 * 号的为我认为的常用指针样式。
cursor: auto; (默认值)
浏览器根据当前内容自动决定指针样式;例如当内容是文字时使用 text 样式cursor: default;默认指针,通常是箭头。cursor: none;不渲染指针!cursor: context-menu;(该指针经测试没效果?)指针下有可用内容目录。配套使用案例如下:
【html+js+css】前端浏览器自定义 右键菜单显示_oumae-kumiko的博客-CSDN博客
cursor: help;* 指示帮助。cursor: pointer;* 悬浮于该元素上时,通常为手。cursor: progress;程序后台繁忙,用户仍可交互 (与wait 相反).cursor: wait;* 程序繁忙,用户不可交互 (与progress 相反).图标一般为沙漏或者表。cursor: cell;指示单元格可被选中cursor: crosshair;* 交叉指针,通常指示位图中的框选cursor: text;指示文字可被选中cursor: vertical-text;指示垂直文字可被选中cursor: alias;复制或快捷方式将要被创建cursor: copy;指示可复制cursor: move;* 被悬浮的物体可被移动
cursor: no-drop;* 当前位置不能扔下
cursor: not-allowed;* 不能执行cursor: grab;可抓取
cursor: grabbing;抓取中
cursor: all-scroll;元素可任意方向滚动(平移)
cursor: col-resize;* 元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头
cursor: row-resize;* 元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头
cursor: zoom-in;* 指示可被放大或缩小
cursor: zoom-out;* 指示可被放大或缩小
cursor: ns-resize;* 指示高双向重新设置大小
cursor: ew-resize;* 指示宽双向重新设置大小
cursor: nwse-resize;* 指示宽、高双向重新设置大小(左上、右下)
cursor: nesw-resize;* 指示宽、高双向重新设置大小(右上、左下)
其他属性:
/* 全局属性 */cursor: inherit;cursor: initial;cursor: unset;
url() : 自定义鼠标指针!
除了浏览器提供的鼠标样式,我们还可以借助 cursor: url() 的特性,即可实现定制自己的鼠标样式!
/* 使用 URL,并提供一个关键字值作为备用 */cursor: url(hand.cur), pointer; /* URL 和 xy 的坐标偏移值,最后提供一个关键字值作为备用 */cursor: url(cursor1.png) 4 12, auto;cursor: url(cursor2.png) 2 2, pointer;
cursor 属性为零个或多个值,多个url()的时候它们之间用逗号分隔,最后必填一个cursor的关键字值。每个指向一个图像文件。浏览器将尝试加载指定的第一个图像,如果无法加载则继续加载下一个图像,如果都无法加载图像或未指定图像,则使用关键字值代表的指针类型。
每个后面都可选跟一对空格分隔的数字表示偏移。它们用来设置指针的热点 (即自定义图标的实际点击位置),位置相对于图标的左上角。
多 `url()` 例子:
cursor: url(one.svg), url(two.svg) 5 5, progress;
url(…)或者逗号分隔的url(…), url(…), …,指向图片文件。用大于一个值提供后备,以防某些指针图片类型不被支持。最后必须提供一个非 URL 后备值。
可选 x,y 坐标。两个小于 32 的无单位非负数。
自定义、定制鼠标指针例子:
【css】自定义鼠标光标指针样式-前端_oumae-kumiko的博客-CSDN博客
本文转自 https://blog.csdn.net/lijiahui_/article/details/130946684,如有侵权,请联系删除。