CSS中的cursor屬性用于設(shè)置元素的鼠標(biāo)指針樣式。它是一種非常有用的特性,可以讓頁(yè)面的交互性更加好,幫助用戶更好地理解頁(yè)面元素的功能。
cursor屬性有很多選項(xiàng),常見(jiàn)的有:
cursor: pointer; /* 指針 */ cursor: text; /* 文本 */ cursor: move; /* 移動(dòng) */ cursor: wait; /* 等待 */ cursor: crosshair; /* 十字線 */ cursor: help; /* 幫助 */ cursor: url(cursor.png), auto; /* 自定義鼠標(biāo)指針 */
其中,自定義鼠標(biāo)指針需要使用url()函數(shù)來(lái)指定圖片路徑或者其他的自定義指針,auto選項(xiàng)則表示使用瀏覽器默認(rèn)的指針。
下面是一個(gè)例子,當(dāng)鼠標(biāo)懸浮在按鈕上時(shí),鼠標(biāo)指針會(huì)變成手形:
<style> button:hover { cursor: pointer; } </style> <button>點(diǎn)擊我</button>
除了hover偽類外,我們還可以在普通的元素上設(shè)置cursor屬性:
<style> .drag { cursor: move; } </style> <div class="drag">這是一個(gè)可拖拽的元素</div>
這樣,當(dāng)鼠標(biāo)移動(dòng)到該元素上時(shí),鼠標(biāo)指針就會(huì)變成移動(dòng)圖標(biāo)。
總之,cursor屬性給我們提供了很多方便的鼠標(biāo)指針樣式選項(xiàng),可以讓我們更好地設(shè)計(jì)和開(kāi)發(fā)交互友好的網(wǎng)站。