css 鼠标光标设置

在CSS中,关于鼠标光标的设置主要通过cursor属性来实现。
以下是一些常见的鼠标光标设置及其描述:

  1. 默认光标
  • 关键字:default
  • 描述:通常是箭头形状,是客户端平台的默认光标样式。
  1. 自动光标
  • 关键字:auto
  • 描述:浏览器根据当前情况自动确定鼠标光标类型。
  1. 手形光标
  • 关键字:pointerhand
  • 描述:竖起一只手指的手形光标,通常用于指示超链接或可点击元素。
  1. 十字线光标
  • 关键字:crosshair
  • 描述:简单的十字线光标,用于标示选择或测量区域。
  1. 文本编辑光标
  • 关键字:text
  • 描述:用于标示可编辑的水平文本的光标,通常是大写字母I的形状。
  1. 移动光标
  • 关键字:move
  • 描述:十字箭头光标,用于标示对象可被移动。
  1. 等待/忙碌光标
  • 关键字:wait
  • 描述:用于标示程序忙、用户需要等待的光标,通常是沙漏或手表的形状。
  1. 帮助信息光标
  • 关键字:help
  • 描述:带有问号标记的箭头,用于标示有帮助信息存在。
  1. 禁止光标
  • 关键字:not-allowed
  • 描述:禁止标记(一个被斜线贯穿的圆圈)光标,用于标示请求的操作不允许被执行。
  1. 自定义光标
  • 关键字:url(url)
  • 描述:可以通过url()函数使用绝对或相对URL地址指定自定义光标文件(后缀为.cur或.ani)。
    此外,还有一些与调整矩形框边缘相关的值,如:
  • e-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resize,这些值分别表示矩形框的边缘可以向特定方向移动的光标。
    伪类选择器与鼠标光标
  • :hover:用于选取鼠标悬停在元素上时的样式。
  • :active:用于选取鼠标点击元素时的样式。
  • :focus:用于选取具有焦点的元素。 这些伪类选择器可以与cursor属性结合使用,以在鼠标悬停、点击或元素具有焦点时改变光标的样式。
posted @ 2024-06-27 09:31  54墨玉  阅读(54)  评论(0编辑  收藏  举报