在前端開發中，cursor 屬性控制滑鼠指標在元素上懸停時的外觀。它允許開發者根據不同的場景和互動需求改變指標樣式，提供更好的使用者體驗和視覺反饋。
以下是 cursor 屬性的一些關鍵理解：
-
作用：
cursor屬性定義了滑鼠指標的形狀，它適用於幾乎所有 HTML 元素。 -
值：
cursor屬性接受一系列預定義的關鍵字值，以及自定義影像 URL。 這些關鍵字值代表不同的指標樣式，例如箭頭、手形、文字輸入游標等等。 -
繼承性：
cursor屬性是可繼承的。這意味著，如果一個元素沒有顯式設定cursor值，它將繼承其父元素的cursor值。 -
優先順序： 更具體的
cursor宣告會覆蓋更一般的宣告。例如，如果一個元素的類設定了cursor: pointer，而它的內聯樣式設定為cursor: text，那麼cursor: text將會生效。 -
使用者體驗： 正確使用
cursor屬性可以顯著提升使用者體驗。例如，在可點選元素（如連結、按鈕）上使用pointer游標，可以清晰地告知使用者該元素可以互動。 -
常見值及用途：
default: 預設游標，通常是箭頭。pointer(或hand): 手形游標，通常用於連結、按鈕等可點選元素。text: 文字輸入游標，通常用於文字框、文字區域等可編輯文字的元素。move: 移動游標，表示元素可以被拖動。wait: 等待游標，通常表示正在進行後臺操作。help: 幫助游標，通常用於帶有幫助資訊的元素。not-allowed: 禁止游標，表示操作不允許。crosshair: 十字準星游標，常用於影像編輯或精確選擇。progress: 進度游標，表示正在進行長時間操作，但使用者仍然可以與頁面互動。grab: 抓取游標，表示可以抓取元素。grabbing: 抓取中游標，表示正在抓取元素。zoom-in: 放大游標。zoom-out: 縮小游標。ns-resize,ew-resize,ne-resize,nw-resize,se-resize,sw-resize: 用於調整大小的游標，指示可以沿不同方向調整元素的大小。url(path/to/cursor.png), auto: 使用自定義影像作為游標。auto是備用游標，如果無法載入自定義影像，則會顯示auto游標。
示例:
<a href="#" style="cursor: pointer;">這是一個連結</a>
<input type="text" style="cursor: text;">
<div style="cursor: move;">這是一個可拖動的元素</div>
總結: cursor 屬性是一個簡單但強大的工具，可以增強網頁的互動性和使用者體驗。 透過選擇合適的指標樣式，可以清晰地傳達元素的功能和可互動性，從而提高使用者的理解和效率。