CSS中控制鼠标指针形状的属性cursor
程序员文章站
2024-02-10 13:39:34
...
最常用的鼠标指针变成小手形： cursor:pointer
曾经IE5cursor:hand也可以有小手形，现经测试高版本IE、Edge、Firefox、Chrome、QQ、360 等浏览器均失败 ，强烈建议使用pointer
案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标悬浮显示效果</title>
<style>
span{
font-size:25px;
color:skyblue;
}
</style>
</head>
<body>
<h2>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</h2>
CSS鼠标手型效果
<span style="cursor:pointer">pointer</span>
<span style="cursor:hand">hand</span><br />
<h6>注：hand失效，建议大家用pointer，因为它可以兼容多种浏览器</h6>
CSS鼠标由系统自动给出效果
<span style="cursor:auto">auto</span><br />
CSS鼠标默认效果
<span style="cursor:default">default</span><br />
CSS鼠标十字型效果
<span style="cursor:crosshair">crosshair</span><br />
CSS鼠标I字形效果(移动到文本上)
<span style="cursor:text">text</span><br />
CSS鼠标移动效果
<span style="cursor:move">move</span><br />
CSS鼠标向右的箭头效果
<span style="cursor:e-resize">e-resize</span><br />
CSS鼠标向右上箭头效果
<span style="cursor:ne-resize"> ne-resize</span><br />
CSS鼠标向上箭头效果
<span style="cursor:n-resize"> n-resize</span><br />
CSS鼠标向左上箭头效果
<span style="cursor:nw-resize">nw-resize</span><br />
CSS鼠标向左箭头效果
<span style="cursor:w-resize"> w-resize</span><br />
CSS鼠标向左下箭头效果
<span style="cursor:sw-resize">sw-resize</span><br />
CSS鼠标向下箭头效果
<span style="cursor:s-resize">s-resize</span><br />
CSS鼠标向右下箭头效果
<span style="cursor:se-resize">se-resize</span><br />
CSS鼠标等待圆圈效果
<span style="cursor:wait">wait</span><br />
CSS鼠标帮助问好？效果
<span style="cursor:help">help</span>
</body>
</html>
上一篇： 记录 fenics 的使用过程
下一篇： 编程员行为规范守则_PHP教程