CSS - Cursors - 極客書

CSS的cursor屬性允許您指定應該顯示給用戶的游標類型。

此屬性的一個很好的用法是將圖像用於表單上的提交按鈕。默認情況下，當光標懸停在連結上時，光標從指針變爲指針。但是，對於表單上的「提交」按鈕，它不會更改表單。因此，每當有人將滑鼠懸停在一個作爲提交按鈕的圖像上時，它就提供了圖像可單擊的視覺提示。

下表顯示了cursor屬性的可能值−

Sr.No.	Value & Description
1	自動光標的形狀取決於它所在的上下文區域。例如I over文本，hand over連結，等等。。。
2	十字線十字線或加號
3	違約箭
4	指針指針（在IE 4中，這個值是指針）
5	移動酒吧
6	電子調整大小光標指示框的邊將向右（東）移動
7	東北調整大小光標指示框的邊將向上和向右移動（北/東）
8	西北調整大小光標指示將向上和向左移動框的邊緣（北/西）
9	不，不，不，不。光標指示要向上（北）移動框的邊緣
10	他是一個很好的人。光標指示框的邊將向下和向右移動（南/東）
11	軟體大小調整光標指示框的邊將向下和向左移動（南/西）
12	s-調整大小光標指示要向下（南）移動框的邊緣
13	w-調整大小光標指示框的邊緣將向左（西）移動
14	文本酒吧
15	等等一小時玻璃杯
16	幫助問號或氣球，非常適合用於幫助按鈕
17	<url> 光標圖像文件的源

注意−您應該嘗試僅使用這些值爲用戶添加有用的信息，並且在某些地方，用戶會希望看到該光標。例如，當某人懸停在某個連結上時使用十字準線可能會使訪問者感到困惑。

下面是一個例子;

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p>Move the mouse over the words to see the cursor change:</p>
      
      <div style = "cursor:auto">Auto</div>
      <div style = "cursor:crosshair">Crosshair</div>
      <div style = "cursor:default">Default</div>
      
      <div style = "cursor:pointer">Pointer</div>
      <div style = "cursor:move">Move</div>
      <div style = "cursor:e-resize">e-resize</div>
      <div style = "cursor:ne-resize">ne-resize</div>
      <div style = "cursor:nw-resize">nw-resize</div>
      
      <div style = "cursor:n-resize">n-resize</div>
      <div style = "cursor:se-resize">se-resize</div>
      <div style = "cursor:sw-resize">sw-resize</div>
      <div style = "cursor:s-resize">s-resize</div>
      <div style = "cursor:w-resize">w-resize</div>
      
      <div style = "cursor:text">text</div>
      <div style = "cursor:wait">wait</div>
      <div style = "cursor:help">help</div>
   </body>
</html>

它將產生以下結果&負;