CSS Cursor屬性 – MDN文檔

一、概述

CSS Cursor 屬性用來設置鼠標指針在元素上的形狀。它可以使用戶在與頁面交互的時候根據光標樣式的不同來做出相應的決策。CSS Cursor 屬性可以控制鼠標光標在任何時候的樣式，不同的形狀可以提高頁面的交互性和用戶體驗。

    /* 初始化定義 */
    cursor: auto;

CSS Cursor屬性提供了多種不同類型的指針，以便於開發者根據需求選擇不同的類型設置樣式。當用戶將鼠標放在一個元素上時，這個屬性將會決定鼠標指針在屏幕上的形狀。

二、常見的指針類型

常見的指針類型如下：

• auto：使用瀏覽器默認光標樣式
• pointer：手指形狀光標，一般用於鏈接、按鍵等元素
• default：默認光標樣式，一般用於文字內容區域等元素
• text：文本光標，一般用於文本內容區域等元素
• wait：等待光標，用於響應每個操作並等待當前操作完成的元素或事件
• move：移動光標，用於在當前界面中拖動控件或文本框
• help：幫助光標，用於顯示幫助信息的元素
• crosshair：十字形光標，用於畫圖等元素

下面的代碼演示了如何使用CSS Cursor屬性來設置光標指針：

    /* 將鼠標指針設置為等待光標 */
    cursor: wait;

    /* 將鼠標指針設置為和鼠標放置在文字區域時一樣的光標 */
    cursor: text;

    /* 將鼠標指針設置為十字形 */
    cursor: crosshair;

三、自定義光標

除了使用瀏覽器默認的光標外，也可以使用自定義的光標。想要使用自定義光標，需要符合以下條件：

• 定義光標的圖片需要為.gif、.png或是.cur格式
• 定義的圖片大小不能超過128×128像素
• 在光標屬性中指定需要用到的定義圖片鏈接

下面的代碼演示了如何使用自定義光標：

    /* 使用自定義光標 */
    cursor: url("custom_cursor.gif"), auto;

在以上代碼中，將自定義的光標鏈接設置為了”custom_cursor.gif”，並且使用逗號將其與瀏覽器默認光標分開。當自定義光標失效或異常時，將使用auto關鍵字重新啟用默認光標。

四、特殊指針類型

CSS Cursor屬性還提供了一些特殊類型的光標：

• not-allowed：禁止光標，一般用于禁用的按鈕或鏈接
• progress：進度光標，一般用於加載中的元素
• all-scroll：四箭頭光標，用於可以進行水平和垂直方向滾動的元素
• col-resize、row-resize：左右箭頭或上下箭頭光標，用於可以調整列寬度或行高的元素

下面的代碼演示了特殊的指針類型：

    /* 將鼠標指針設置為not-allowed */
    cursor: not-allowed;

    /* 將鼠標指針設置為所有方向滾動的光標 */
    cursor: all-scroll;

    /* 將鼠標指針設置為水平方向的箭頭光標 */
    cursor: col-resize;

五、總結

在網頁開發中，CSS Cursor屬性不僅可以使頁面變得更加交互，還可以提升用戶的體驗。開發者可以根據需求選擇不同的類型設置樣式，在滿足基本要求的情況下，可以自定義光標和使用特殊指針類型，實現更佳的頁面效果。