CSS的cursor属性允许您指定应该显示给用户的游标类型。默认情况下,当光标悬停在链接上时,光标从指针变为手。
下表显示了cursor属性的可能值-
| Sr.No. | Value & Remark |
|---|---|
| 1 |
auto 光标的形状取决于其上方的上下文区域。 |
| 2 |
crosshair 十字准线或加号 |
| 3 |
default 一个箭头 |
| 4 |
pointer 手(在IE 4中,该值为手) |
| 5 |
move 十字箭头 |
| 6 |
e-resize 光标指示框的边缘将向右(向东)移动 |
| 7 |
ne-resize 光标指示框的边缘将向上和向右移动(北/东) |
| 8 |
nw-resize 光标指示框的边缘要上下移动(北/西) |
| 9 |
n-resize 光标指示框的边缘要向上移动(向北) |
| 10 |
se-resize 光标指示框的边缘将被左右移动(南/东) |
| 11 |
sw-resize 光标指示框的边缘要上下左右移动(南/西) |
| 12 |
s-resize 光标指示框的边缘要向下移动(向南) |
| 13 |
w-resize 光标指示框的边缘将向左(向西)移动 |
| 14 |
text 上下箭头 |
| 15 |
wait 一个沙漏 |
| 16 |
help 问号或气球,非常适合在帮助按钮上使用 |
| 17 |
<url> 光标图像文件的来源 |
这是一个例子-
<html>
<head>
</head>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">cursor</span><span class="pun">:</span><span class="kwd">auto</span><span class="atv">"</span><span class="tag">></span><span class="pln">Auto</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">cursor</span><span class="pun">:</span><span class="pln">crosshair</span><span class="atv">"</span><span class="tag">></span><span class="pln">Crosshair</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">cursor</span><span class="pun">:</span><span class="kwd">default</span><span class="atv">"</span><span class="tag">></span><span class="pln">Default</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">cursor</span><span class="pun">:</span><span class="pln">pointer</span><span class="atv">"</span><span class="tag">></span><span class="pln">Pointer</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">cursor</span><span class="pun">:</span><span class="pln">move</span><span class="atv">"</span><span class="tag">></span><span class="pln">Move</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">cursor</span><span class="pun">:</span><span class="pln">e</span><span class="pun">-</span><span class="pln">resize</span><span class="atv">"</span><span class="tag">></span><span class="pln">e-resize</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">cursor</span><span class="pun">:</span><span class="pln">ne</span><span class="pun">-</span><span class="pln">resize</span><span class="atv">"</span><span class="tag">></span><span class="pln">ne-resize</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">cursor</span><span class="pun">:</span><span class="pln">nw</span><span class="pun">-</span><span class="pln">resize</span><span class="atv">"</span><span class="tag">></span><span class="pln">nw-resize</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">cursor</span><span class="pun">:</span><span class="pln">n</span><span class="pun">-</span><span class="pln">resize</span><span class="atv">"</span><span class="tag">></span><span class="pln">n-resize</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">cursor</span><span class="pun">:</span><span class="pln">se</span><span class="pun">-</span><span class="pln">resize</span><span class="atv">"</span><span class="tag">></span><span class="pln">se-resize</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">cursor</span><span class="pun">:</span><span class="pln">sw</span><span class="pun">-</span><span class="pln">resize</span><span class="atv">"</span><span class="tag">></span><span class="pln">sw-resize</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">cursor</span><span class="pun">:</span><span class="pln">s</span><span class="pun">-</span><span class="pln">resize</span><span class="atv">"</span><span class="tag">></span><span class="pln">s-resize</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">cursor</span><span class="pun">:</span><span class="pln">w</span><span class="pun">-</span><span class="pln">resize</span><span class="atv">"</span><span class="tag">></span><span class="pln">w-resize</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">cursor</span><span class="pun">:</span><span class="pln">text</span><span class="atv">"</span><span class="tag">></span><span class="pln">text</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">cursor</span><span class="pun">:</span><span class="pln">wait</span><span class="atv">"</span><span class="tag">></span><span class="pln">wait</span><span class="tag"></div></span><span class="pln">
</span><span class="tag"><div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">cursor</span><span class="pun">:</span><span class="pln">help</span><span class="atv">"</span><span class="tag">></span><span class="pln">help</span><span class="tag"></div></span><span class="pln">
</body>
</html>
它将产生以下输出-