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