通过 CSS 的 cursor 属性可以改变光标在目标元素上的形状。
该属性支待如下属性值。
► all-scroll: 代表十字箭头光标。
► col-resize: 代表水平拖动线光标
► crosshair: 代表十字线光标。
► move: 代表移动十字箭头光标。
► help： 代表带问号的箭头光标。
► no-drop: 代表禁止光标。
► not-allowed: 代表禁止光标。
► pointer: 代表手形光标。
► prog「ess: 代表带进度环的箭头光标。
► row-resize: 代表垂直拖动线光标。
► text: 代表文本编辑光标。 通常就是一个大写的 I 字光标。
► vertical-text: 代表垂直文本编辑光标。 通常就是大写的 I 字光标旋转 90° 。 ► wait: 代表进度环光标。
► *-resize: 代表可在各种方向上拖动的光标。 支持 w-resize、 s-resize、 n-resize、 e-resize、 ne-resize、 sw-resize、 se-resize、 ow-resize 等各种属性值，其中 n 代表向上方向， s 代 表向下方向， e 代表向右方向 ， w 代表向左方向 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
display: inline-block;
border: 1px solid red;
width: 160px;
height: 70px;
}
</style>
</head>
<body>
<div style="cursor:all-scroll ;">十字箭头光标</div>
<div style="cursor:col-resize ;">水平拖动线光标</div>
<div style="cursor:crosshair;">十字线光标</div>
<div style="cursor:move;">代表移动十字箭头光标</div>
<div style="cursor:help ;">带问号的箭头光标</div>
<div style="cursor:no-drop;">禁止光标</div>
<div style="cursor:not-allowed;">禁止光标</div>
<div style="cursor : pointer;">手形光标</div>
<div style="cursor:progress;">带进度环的箭头光标</div>
<div style="cursor : row-resize;">心垂直拖动线光标</div>
<div style=" cursor : text;">文本编辑光标</div>
<div style=" cursor:vertical-text;">垂直文本编辑光标</div>
<div style="cursor : wait;">进度环光标</div>
<div style="cursor : n-resize ;">可向上拖动的光标</div>
<div style=" cursor : ne-resize;">上、右可拖动的光标</div>
<div style="cursor : se-resize ;">下、右可拖动的光标</div>
</body>
</html>
运行结果：
3141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
