css 鼠标光标设置
在CSS中,关于鼠标光标的设置主要通过cursor
属性来实现。
以下是一些常见的鼠标光标设置及其描述:
- 默认光标:
- 关键字:
default
- 描述:通常是箭头形状,是客户端平台的默认光标样式。
- 自动光标:
- 关键字:
auto
- 描述:浏览器根据当前情况自动确定鼠标光标类型。
- 手形光标:
- 关键字:
pointer
或hand
- 描述:竖起一只手指的手形光标,通常用于指示超链接或可点击元素。
- 十字线光标:
- 关键字:
crosshair
- 描述:简单的十字线光标,用于标示选择或测量区域。
- 文本编辑光标:
- 关键字:
text
- 描述:用于标示可编辑的水平文本的光标,通常是大写字母I的形状。
- 移动光标:
- 关键字:
move
- 描述:十字箭头光标,用于标示对象可被移动。
- 等待/忙碌光标:
- 关键字:
wait
- 描述:用于标示程序忙、用户需要等待的光标,通常是沙漏或手表的形状。
- 帮助信息光标:
- 关键字:
help
- 描述:带有问号标记的箭头,用于标示有帮助信息存在。
- 禁止光标:
- 关键字:
not-allowed
- 描述:禁止标记(一个被斜线贯穿的圆圈)光标,用于标示请求的操作不允许被执行。
- 自定义光标:
- 关键字:
url(url)
- 描述:可以通过
url()
函数使用绝对或相对URL地址指定自定义光标文件(后缀为.cur或.ani)。
此外,还有一些与调整矩形框边缘相关的值,如: e-resize
、ne-resize
、nw-resize
、n-resize
、se-resize
、sw-resize
、s-resize
和w-resize
,这些值分别表示矩形框的边缘可以向特定方向移动的光标。
伪类选择器与鼠标光标::hover
:用于选取鼠标悬停在元素上时的样式。:active
:用于选取鼠标点击元素时的样式。:focus
:用于选取具有焦点的元素。 这些伪类选择器可以与cursor
属性结合使用,以在鼠标悬停、点击或元素具有焦点时改变光标的样式。