css光标

帆 2024-05-01 0 阅读 评论

  CSS 附带了一些内置类型的光标 以满足您的需要。它们支持多种条件,具体取决于当前网站界面的状态。例如,在加载项目时您可能需要一个加载状态光标。这告诉用户后台正在进行某些操作,他们需要等待直到获取完成。

  如何添加光标?

  当您将鼠标指向 Web 界面上的任何元素时,光标属性可帮助您设置鼠标光标。以下是一些可用的标准光标:

  CSS 光标属性描述

  cursor: wait:等待 这表明程序正忙,用户无法与界面交互,直到恢复默认。
  cursor: help:帮助 这表明有一些帮助信息可用。
  cursor: crosshair:十字准线 该十字光标用于指示媒体或位图的选择。
  cursor: grab:抓取 这用于您想要显示可以抓取元素的情况。

  例子:

  让我们看看如何实现它以及输出。

  <div>
  <div class="demo-waiting">等待</div>
  <div class="demo-help">帮助</div>
  <div class="demo-crosshair">十字线</div>
  <div class="demo-grab">选择</div>
  </div>

  代码

  这定义了嵌套在 div 容器内的四个不同级别的标题。我们希望它们在 CSS 中都有不同的光标值。我们是这样做的:

  <style>
  div.demo-waiting {
  cursor: wait;
  }
  div.demo-help {
  cursor: help;
  }
  div.demo-crosshair {
  cursor: crosshair;
  }
  div.demo-grab {
  cursor: grab;
  }

  </style>

  添加自定义表情符号和图像光标!

  想要进一步自定义默认光标吗?使用 CSS,您可以用您最喜欢的图像或表情符号替换那个无聊的光标!让我们做以下演示来说明这一点:

  需要注意的是图片需要在32*32大小的

文章声明:以上内容(如有图片或视频亦包括在内)除非注明,否则均为时光荏苒原创文章,转载或复制请以超链接形式并注明出处。