CSS中鼠標(biāo)經(jīng)過(guò)變手指示是Web開發(fā)中一個(gè)常用的交互效果，可以讓用戶明確地知道當(dāng)前鼠標(biāo)具有哪些可操作的功能。下面我們來(lái)分享一下如何在CSS中實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)變手指示。
/* 鼠標(biāo)經(jīng)過(guò)變手指示 */
:hover {
cursor: pointer;
}如上代碼，只需要在樣式中添加:hover偽類，然后設(shè)置cursor屬性為pointer即可。在文本、按鈕、鏈接等元素上均可實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)變手指示效果。
我們還可以通過(guò)設(shè)置不同的cursor值來(lái)實(shí)現(xiàn)不同的鼠標(biāo)經(jīng)過(guò)效果。以下是常用的一些cursor值和對(duì)應(yīng)的效果：
/* 鼠標(biāo)經(jīng)過(guò)變手指示 */
:hover {
cursor: pointer; /* 指針 */
cursor: text; /* 文本光標(biāo) */
cursor: wait; /* 等待 */
cursor: help; /* 幫助 */
cursor: not-allowed; /* 禁止 */
cursor: move; /* 移動(dòng) */
cursor: crosshair; /* 十字線 */
cursor: url(cursor.png) 10 10,auto; /* 自定義圖片光標(biāo) */
}需要注意的是，不同的瀏覽器對(duì)自定義光標(biāo)的支持程度不同。如果需要支持多個(gè)瀏覽器，建議使用多個(gè)不同格式和大小的光標(biāo)圖片，然后通過(guò)HTML<head></head>區(qū)域中的<style></style>標(biāo)簽內(nèi)添加多個(gè)不同瀏覽器對(duì)應(yīng)的CSS代碼來(lái)設(shè)置光標(biāo)圖片，最后調(diào)用自定義光標(biāo)。