當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

CSS cursor屬性用法及代碼示例


cursor屬性用於指定在指向元素時要顯示的鼠標光標。

用法:

cursor:value;

屬性值：

  • alias:此屬性用於顯示光標指示要創建的內容。
  • all-scroll:在此屬性中，光標指示滾動。
  • auto:這是瀏覽器設置光標的默認屬性。
  • cell:在此屬性中，光標指示已選擇一個單元格或一組單元格。
  • context-menu:在此屬性中，光標指示上下文菜單可用。
  • col-resize:在此屬性中，光標指示可以水平調整列的大小。
  • copy:在此屬性中，光標指示要複製的內容。
  • crosshair:在此屬性中，光標呈現為十字準線。
  • default:默認光標。
  • e-resize:在此屬性中，光標指示框的邊將向右移動。
  • ew-resize:在此屬性中，光標指示雙向大小調整光標。
  • help:在此屬性中，光標指示幫助可用。
  • move:在此屬性中，光標指示要移動的內容
  • n-resize:在此屬性中，光標指示框的邊將向上移動。
  • ne-resize:在此屬性中，光標指示框的邊將向上和向右移動。
  • nesw-resize:此屬性指示雙向調整大小遊標。
  • ns-resize:此屬性指示雙向調整大小遊標。
  • nw-resize:在此屬性中，光標指示框的邊將向上和向左移動。
  • nwse-resize:此屬性指示雙向調整大小遊標。
  • no-drop:在此屬性中，光標指示不能將拖動的項目放在此處。
  • none:此屬性指示沒有為該元素呈現任何光標。
  • not-allowed:在此屬性中，光標指示將不會執行所請求的動作。
  • pointer:在此屬性中，光標是指針，表示鏈接
  • progress:在此屬性中，光標指示程序正忙。
  • row-resize:在此屬性中，光標指示可以垂直調整行的大小。
  • s-resize:在此屬性中，光標指示框的邊將向下移動。
  • se-resize:在此屬性中，光標指示框的邊將被上下移動。
  • sw-resize:在此屬性中，光標指示框的邊將被上下移動。
  • text:在此屬性中，光標指示可以選擇的文本。
  • URL:在此屬性中，以逗號分隔的URL列表指向自定義遊標，而通用遊標則位於列表的末尾。
  • vertical-text:在此屬性中，光標指示可以選擇的vertical-text。
  • w-resize:在此屬性中，光標指示框的邊將向左移動。
  • wait:在此屬性中，光標指示程序正忙。
  • zoom-in:在此屬性中，光標指示可以放大的內容。
  • zoom-out:在此屬性中，光標指示可以將某些內容縮小。
  • initial:此屬性用於設置為其默認值。
  • inherit:從其父元素繼承。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        CSS | cursor property 
    </title> 
    <style> 
        .wait { 
            cursor:wait; 
        } 
          
        h1 { 
            color:green; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
  
        <h1>GeeksforGeeks</h1> 
        <p>Mouse over the words to change the mouse cursor.</p> 
  
        <p class="wait">wait</p> 
    </center> 
</body> 
  
</html>

輸出：

支持的瀏覽器：CSS | Java支持的瀏覽器。遊標屬性如下：

  • 穀歌瀏覽器
  • Edge
  • 火狐瀏覽器
  • Opera
  • Safari



相關用法


注：本文由純淨天空篩選整理自Vijay Sirra大神的英文原創作品 CSS | cursor property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。