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大小的
本文来源:重庆seo博客
本文地址:https://www.focusonseo.cn/css/78.html
文章声明:以上内容(如有图片或视频亦包括在内)除非注明,否则均为重庆seo博客原创文章,转载或复制请以超链接形式并注明出处。