每日一学—CSS cursor 属性

黛琳ghz

已于 2022-11-01 01:01:50 修改

阅读量3.3k

点赞数 10

分类专栏： # HTML+CSS 每日一学前端文章标签： css html

于 2022-04-02 00:07:06 首次发布

本文链接：https://blog.csdn.net/weixin_53231455/article/details/123910797

版权

前端同时被 3 个专栏收录

172 篇文章 17 订阅

订阅专栏

HTML+CSS

26 篇文章 10 订阅

订阅专栏

每日一学

23 篇文章 9 订阅

订阅专栏

定义和用法

cursor 属性规定要显示的光标的类型（形状）。

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

可能的值：Auto、crosshair、default、pointer、move、e-resize、ne-resize、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize、text、wait、help

具体查看文档CSS cursor 属性

测试代码

<html>

<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>

</html>