在 CSS 中,鼠標經過(:hover
)是一個非常有用的偽類選擇器,可以用來增強交互性和視覺效果。
當鼠標懸停在某個元素上時,可以使用 CSS 規則改變該元素的外觀。例如,在鼠標經過時改變該元素的顏色,改變光標形狀,顯示隱藏的元素(如下拉菜單),添加動畫效果等等。
button:hover { background-color: #007bff; color: #fff; cursor: pointer; }
以上示例代碼在鼠標懸停在按鈕上時,會將按鈕的背景顏色變為藍色,字體顏色變為白色,并把光標形狀改為手型,這樣用戶就可以知道這個按鈕可以被點擊。
除了可以應用于按鈕外,鼠標經過還可以應用于鏈接、圖像、表格、列表等元素。例如,在鼠標經過時顯示一個漂亮的圖片效果:
img:hover { box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); transform: scale(1.1); }
以上示例代碼在鼠標懸停在圖片上時,會在圖片周圍添加一個陰影效果,同時將圖片放大 10%,營造出一種立體的感覺。
總之,鼠標經過是 CSS 中非常實用的一個功能,可以為用戶帶來更好的用戶體驗和視覺效果。
上一篇css設置日期格式
下一篇htlm css圖片特效