CSS鼠標樣式(cursor)屬性用于控制鼠標在不同元素上的形狀。它可以幫助你通過更改鼠標外觀來增強用戶交互和體驗。簡言之,你可以通過cursor屬性更改整個網頁上不同區域內光標的樣式。
cursor屬性在CSS中非常靈活,支持各種值。以下是其中一些最常見的值:
.cursor { cursor: auto; cursor: default; cursor: pointer; cursor: text; cursor: move; cursor: not-allowed; }
auto: 默認情況下,瀏覽器決定顯示什么樣的鼠標指針。
default: 瀏覽器顯示默認的光標,通常是一個箭頭。
pointer: 當鼠標指針移動到元素上方時,顯示手形光標。
text: 當鼠標位于可編輯的文本區域中時,將顯示文本插入光標。
move: 當鼠標移到可拖動元素上時,將顯示移動光標。
not-allowed: 當鼠標懸停在禁止狀態下的元素上時,將顯示禁止光標。
當然,您也可以使用外部圖像替換cursor值來創建自定義光標。這種方法是使用CSS的URL屬性簡單地指定外部圖像文件。
.custom-cursor { cursor: url('example.png'), auto; }
鑒于光標對用戶體驗的重要性,我們強烈建議您使用cursor屬性來控制頁面上的鼠標樣式。