您的位置:

CSS cursor属性全面解读

一、CSS cursor属性

CSS cursor属性用于定义当鼠标移动到某个元素上时呈现的光标形态,是Web界面设计中非常基础的CSS属性之一。

语法:

  selector{
    cursor: value;
  }

参数:

  • auto: 默认值,呈现标准光标
  • default: 呈现默认光标
  • none: 隐藏光标
  • context-menu: 呈现上下文菜单光标
  • help: 呈现帮助光标
  • pointer: 呈现链接光标
  • progress: 呈现等待光标
  • wait: 呈现等待光标
  • cell: 呈现表格单元格光标
  • crosshair: 呈现十字线光标
  • text: 呈现文本光标
  • vertical-text: 呈现竖排文本光标
  • alias: 呈现链接操作光标
  • copy: 呈现复制操作光标
  • move: 呈现移动操作光标
  • no-drop: 呈现不可拖动光标
  • not-allowed: 呈现不可用光标
  • e-resize: 呈现向右调整大小光标
  • n-resize: 呈现向上调整大小光标
  • ne-resize: 呈现向右上调整大小光标
  • nw-resize: 呈现向左上调整大小光标
  • s-resize: 呈现向下调整大小光标
  • se-resize: 呈现向右下调整大小光标
  • sw-resize: 呈现向左下调整大小光标
  • w-resize: 呈现向左调整大小光标
  • ew-resize: 呈现水平调整大小光标
  • ns-resize: 呈现垂直调整大小光标
  • nwse-resize: 呈现左上到右下的调整大小光标
  • nesw-resize: 呈现右上到左下的调整大小光标
  • url(address): 呈现自定义光标

二、CSS cursor改不了

在HTML中,一些元素是不允许被改变光标的,比如a、input、button、textarea等表单元素。

此时,如果我们想要在这些元素上自定义光标,可以通过在元素的内部嵌套一个块级元素,将光标属性应用于这个块级元素来实现。

  <a href="#">
    <div class="cursor">Click me</div>
  </a>
  
  <style>
    .cursor {
      cursor: pointer;
    }
  </style>

三、CSS cursor属性十字光标

在Web界面设计中,我们通常需要在调整大小或者进行移动操作时呈现十字光标效果。

使用CSS的cursor属性来实现此功能非常简单,你只需要直接在样式中添加 cursor: crosshair; 即可。

四、CSS cursor禁用

在一些容器内,我们希望禁止用户通过鼠标对其进行操作,此时可以采用CSS的pointer-events: none;来实现。

在这种情况下,使用cursor: default;或者cursor: not-allowed;不能改变光标的状态,因为pointer-events: none;会禁止鼠标事件的触发。

  .box {
    pointer-events: none;
  }

五、CSS cursor属性URL

在Web界面设计中,我们可以通过自定义光标的图片路径来实现各种炫酷的效果。

在使用自定义光标之前,你需要准备好光标的图片并上传到服务器。然后,可以通过CSS的cursor: url('address'), auto;来设置自定义光标。

其中,address指代你上传的光标图片的地址。

  .cursor {
    cursor: url('./cursor.png'), auto;
  }

六、CSS cursor pointer

cursor: pointer;是Web界面设计中非常常见的光标效果之一,它表示一个链接。

在实际使用中,我们应该尽量考虑将其应用到可以点击的元素上,以提高用户体验。

七、CSS cursor属性pointer选取

当鼠标位于某个元素上时,可以通过将鼠标指向元素并进行单击操作来选取它。

在Web页面设计中,我们通常希望用户能够轻松地选择文本或者图片区域,此时可以通过CSS的cursor: text;来实现。

  .selectable {
    cursor: text;
  }

八、总结

CSS的cursor属性在Web界面设计中应用十分广泛,在实用的同时也增加了页面的美观度和交互性。

从基础的autodefault,到自定义的url和不可用的pointer-events,CSS的cursor属性能够满足我们对多种光标效果的需求。