CSS中,我們可以通過設(shè)置cursor屬性來改變鼠標(biāo)的形狀,這也包括顯示手的形狀。當(dāng)我們將鼠標(biāo)懸停在一個(gè)鏈接或者按鈕上時(shí),顯示手的形狀可以使用戶知道他們可以點(diǎn)擊它并執(zhí)行某種操作。
要顯示手,我們可以將cursor屬性設(shè)置為"pointer"。
button { cursor: pointer; } a { cursor: pointer; }
在上面的代碼中,我們將顯示手應(yīng)用到了按鈕和鏈接上。當(dāng)鼠標(biāo)懸停在這些元素上時(shí),它們將顯示手形狀,提示用戶可以點(diǎn)擊它們。
注意,如果你發(fā)現(xiàn)你的CSS中并沒有把所有按鈕和鏈接都設(shè)置為顯示手,你可以通過以下代碼來統(tǒng)一設(shè)置:
* { cursor: pointer; }
上述代碼將把鼠標(biāo)的形狀設(shè)置為顯示手,應(yīng)用到網(wǎng)頁上的所有元素,這也包括文字和圖片等其他元素。
在移動(dòng)端設(shè)備上,由于沒有鼠標(biāo),我們可以通過設(shè)置類似于觸摸的樣式來代替顯示手。下面的代碼可以使元素在移動(dòng)設(shè)備上被點(diǎn)擊時(shí),顯示一個(gè)灰色半透明的背景色:
button, a { -webkit-tap-highlight-color: rgba(0,0,0,0.1); }
這使得用戶在手機(jī)上點(diǎn)擊元素時(shí)可以有一個(gè)視覺上的反饋,提高了用戶體驗(yàn)。