探索CSS Cursor Style

在web開發過程中，鼠標光標的變化能夠提升網站的用戶體驗。當鼠標停在某個元素上時，改變鼠標光標的樣式可以吸引用戶的注意力並暗示用戶該元素是可交互的。在本文中，我們將從各個方面探索CSS的鼠標樣式。

一、基礎鼠標樣式

在CSS中，設置鼠標樣式使用`cursor`屬性。最常見的鼠標樣式包括：

• `default`：默認樣式。
• `pointer`：手指指向元素時的樣式，表示該元素可以點擊。
• `text`：鼠標進入文本區域時的樣式，表示該區域可以輸入或選擇文本。
• `move`：當鼠標移動到可拖動元素上方時的樣式，表示該元素可以移動。

button {
  cursor: pointer;
}

textarea {
  cursor: text;
}

.draggable {
  cursor: move;
}

二、自定義鼠標樣式

如果默認的鼠標樣式不滿足需求，可以自定義鼠標樣式。為了實現自定義的鼠標樣式，需要使用`url`屬性指定圖片文件，並且將`cursor`屬性的值設為`url`。

.custom-cursor {
  cursor: url('custom-cursor.png'), auto;
}

在上面的例子中，`custom-cursor.png`是一個自定義的圖片文件，鼠標光標將會變成該圖片顯示的樣子。注意，如果指定的圖片文件不存在，光標會退化為默認樣式。此外，`auto`表示當鼠標不在可交互元素上方時，鼠標將會恢復到默認樣式。

三、使用JavaScript改變鼠標樣式

除了在CSS中設置鼠標樣式之外，還可以使用JavaScript在運行時改變鼠標樣式。例如，在拖動元素時，可以將鼠標樣式設置為`grabbing`來表示元素正在被拖動。

const draggableElement = document.querySelector('.draggable');

draggableElement.addEventListener('drag', (event) => {
  event.preventDefault();
  draggableElement.style.cursor = 'grabbing';
});

draggableElement.addEventListener('dragend', (event) => {
  draggableElement.style.cursor = 'move';
});

在上面的例子中，當拖動元素時，使用JavaScript改變鼠標樣式。事件`drag`在元素被拖動時會一直觸發，`dragend`事件在拖動結束後觸發。通過將拖動元素的`cursor`屬性設置為`grabbing`，鼠標光標將會變成手指拿着元素的樣子。當拖動結束時，鼠標光標將會恢復到移動狀態，即`cursor`屬性為`move`。

四、一些實用的鼠標樣式

除了常見的鼠標樣式之外，還有一些在特定情況下非常實用的鼠標樣式。

• `not-allowed`：表示鼠標光標在不可點擊的元素上方，表示該操作不被允許。
• `wait`：表示鼠標光標正在等待某個操作完成。
• `col-resize`和`row-resize`：分別表示鼠標光標用於調整列寬和行高的樣式。

.disabled {
  cursor: not-allowed;
}

.waiting {
  cursor: wait;
}

.resizable-row {
  cursor: row-resize;
}

.resizable-column {
  cursor: col-resize;
}

五、總結

在本文中，我們探索了多個方面的CSS鼠標樣式，包括基礎鼠標樣式、自定義鼠標樣式、使用JavaScript改變鼠標樣式以及一些實用的鼠標樣式。通過設置合適的鼠標樣式，網站可以提升用戶體驗並且更加易用。