浏览器内置指针样式:
标了红色 * 号的为我认为的常用指针样式。
cursor: auto; (默认值) | 浏览器根据当前内容自动决定指针样式; 例如当内容是文字时使用 text 样式 |
cursor: default; | 默认指针,通常是箭头。 |
cursor: none; | 不渲染指针! |
cursor: context-menu; | (该指针经测试没效果?)指针下有可用内容目录。配套使用案例如下: |
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(one.svg), url(two.svg) 5 5, progress;
<url
>
url(…)
或者逗号分隔的url(…), url(…), …
,指向图片文件。用大于一个
<x>
<y>
可选 x,y 坐标。两个小于 32 的无单位非负数。
自定义、定制鼠标指针例子:
本文转自 https://blog.csdn.net/lijiahui_/article/details/130946684,如有侵权,请联系删除。
标签:鼠标,url,指示,cursor,样式,CSS,光标,指针 From: https://www.cnblogs.com/shuiche/p/18283463