CSS cursor屬性用於設置鼠標指針在元素上的形狀。在Web開發中，鼠標指針形狀的變化可以提供更好的用戶交互體驗。
一、默認值
當沒有設置cursor屬性時，鼠標指針將使用瀏覽器默認的形狀，通常為箭頭形狀（”default”）。
/* 示例 */
div {
/* 不設置cursor屬性 */
}
二、常用值
1、指針形狀
使用”pointer”可以將鼠標指針形狀變為手形，表示元素是可點擊的。
/* 示例 */
button {
cursor: pointer;
}
2、文本形狀
使用”text”可以將鼠標指針形狀變為文本輸入形狀，表示元素可以進行文本輸入。
/* 示例 */
input[type="text"] {
cursor: text;
}
3、移動形狀
使用”move”可以將鼠標指針形狀變為4向箭頭，表示元素可以被拖動。
/* 示例 */
div {
cursor: move;
}
三、其他值
1、禁止形狀
使用”not-allowed”可以將鼠標指針形狀變為圓圈加斜杠，表示元素不可用或不可點擊。
/* 示例 */
button:disabled {
cursor: not-allowed;
}
2、等待形狀
使用”wait”可以將鼠標指針形狀變為沙漏形狀，表示元素正在等待加載或處理數據。
/* 示例 */
button.loading {
cursor: wait;
}
3、放大形狀
使用”zoom-in”可以將鼠標指針形狀變為放大鏡形狀，表示元素可以放大查看。
/* 示例 */
img {
cursor: zoom-in;
}
4、收縮形狀
使用”zoom-out”可以將鼠標指針形狀變為縮小鏡形狀，表示元素可以縮小查看。
/* 示例 */
img {
cursor: zoom-out;
}
總結
cursor屬性可以為我們的用戶交互體驗提供更多的可能，期望大家在實際應用中能夠更好的運用這一屬性。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/294138.html
微信掃一掃 
支付寶掃一掃 