首页问答社区 web技术正文

css设置鼠标光标形状的方法

2021-02-25 12:49:00 178 0

本文将为大家详细介绍“css设置鼠标光标形状的方法”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“css设置鼠标光标形状的方法”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

css是什么意思

css是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。

css设置鼠标光标形状的方法

css设置鼠标光标形状的方法：可以利用cursor属性来进行设置，如【<span style="cursor:crosshair">crosshair</span>】，表示将光标设置为十字线形状。

属性介绍：

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

常用属性值：

text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）

设置鼠标光标形状的方法：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>恰卡编程网</title>
</head>
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<spanstyle="cursor:auto">auto</span><br>
<spanstyle="cursor:crosshair">crosshair</span><br>
<spanstyle="cursor:default">default</span><br>
<spanstyle="cursor:e-resize">e-resize</span><br>
<spanstyle="cursor:help">help</span><br>
<spanstyle="cursor:move">move</span><br>
<spanstyle="cursor:n-resize">n-resize</span><br>
<spanstyle="cursor:ne-resize">ne-resize</span><br>
<spanstyle="cursor:nw-resize">nw-resize</span><br>
<spanstyle="cursor:pointer">pointer</span><br>
<spanstyle="cursor:progress">progress</span><br>
<spanstyle="cursor:s-resize">s-resize</span><br>
<spanstyle="cursor:se-resize">se-resize</span><br>
<spanstyle="cursor:sw-resize">sw-resize</span><br>
<spanstyle="cursor:text">text</span><br>
<spanstyle="cursor:w-resize">w-resize</span><br>
<spanstyle="cursor:wait">wait</span><br>
</body>
</html>

如果你能读到这里，小编希望你对“css设置鼠标光标形状的方法”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注恰卡编程网行业资讯频道！

css