无涯教程-CSS - 游标(Cursors)

55 阅读2分钟

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">&lt;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">&gt;</span><span class="pln">Auto</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;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">&gt;</span><span class="pln">Crosshair</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;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">&gt;</span><span class="pln">Default</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  
  </span><span class="tag">&lt;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">&gt;</span><span class="pln">Pointer</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;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">&gt;</span><span class="pln">Move</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;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">&gt;</span><span class="pln">e-resize</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;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">&gt;</span><span class="pln">ne-resize</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;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">&gt;</span><span class="pln">nw-resize</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  
  </span><span class="tag">&lt;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">&gt;</span><span class="pln">n-resize</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;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">&gt;</span><span class="pln">se-resize</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;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">&gt;</span><span class="pln">sw-resize</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;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">&gt;</span><span class="pln">s-resize</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;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">&gt;</span><span class="pln">w-resize</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  
  </span><span class="tag">&lt;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">&gt;</span><span class="pln">text</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;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">&gt;</span><span class="pln">wait</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;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">&gt;</span><span class="pln">help</span><span class="tag">&lt;/div&gt;</span><span class="pln">

</body> </html>

它将产生以下输出-

参考链接

www.learnfk.com/css/css-cur…