首页 > 代码库 > [CSS揭秘]鼠标光标
[CSS揭秘]鼠标光标
鼠标指针可以用来告诉用户当前可以执行什么动作
目前已有的内置光标种类有:
crosshair | help | move | pointer | progress | text | wait | e-resize |
ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | none |
context-menu | cell | vertical-text | alias | copy | no-drop | not-allowed | ew-resize |
ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-resize | zoom-in | zoom-out |
介绍几种常用光标
1. 提示禁用状态
not-allowed用于提示某个控件因为某种原因无法进行交互,常常用于表单
:disabled, [disabled], [aria-disabled=‘true‘]{
cursor: not-allowed;
}
2. 隐藏鼠标光标
比如公共场所的信息查询台,娱乐平台需要合适的隐藏鼠标光标,带来可用性提升。
video{
cursor: none;
}
3. 缩放光标
现在提供了几种新的缩放光标,分别是 ew-resize, ns-resize, nesw-resize, nwse-resize
常常用于自定义缩放元素的边界上
[CSS揭秘]鼠标光标
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。