在 CSS 中,鼠標(biāo)經(jīng)過(:hover
)是一個(gè)非常有用的偽類選擇器,可以用來增強(qiáng)交互性和視覺效果。
當(dāng)鼠標(biāo)懸停在某個(gè)元素上時(shí),可以使用 CSS 規(guī)則改變?cè)撛氐耐庥^。例如,在鼠標(biāo)經(jīng)過時(shí)改變?cè)撛氐念伾淖児鈽?biāo)形狀,顯示隱藏的元素(如下拉菜單),添加動(dòng)畫效果等等。
button:hover { background-color: #007bff; color: #fff; cursor: pointer; }
以上示例代碼在鼠標(biāo)懸停在按鈕上時(shí),會(huì)將按鈕的背景顏色變?yōu)樗{(lán)色,字體顏色變?yōu)榘咨压鈽?biāo)形狀改為手型,這樣用戶就可以知道這個(gè)按鈕可以被點(diǎn)擊。
除了可以應(yīng)用于按鈕外,鼠標(biāo)經(jīng)過還可以應(yīng)用于鏈接、圖像、表格、列表等元素。例如,在鼠標(biāo)經(jīng)過時(shí)顯示一個(gè)漂亮的圖片效果:
img:hover { box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); transform: scale(1.1); }
以上示例代碼在鼠標(biāo)懸停在圖片上時(shí),會(huì)在圖片周圍添加一個(gè)陰影效果,同時(shí)將圖片放大 10%,營造出一種立體的感覺。
總之,鼠標(biāo)經(jīng)過是 CSS 中非常實(shí)用的一個(gè)功能,可以為用戶帶來更好的用戶體驗(yàn)和視覺效果。