探索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改變滑鼠樣式以及一些實用的滑鼠樣式。通過設置合適的滑鼠樣式，網站可以提升用戶體驗並且更加易用。