CSS中,有一個常用的效果就是鼠標移過圖片時,能夠實現一些特殊的效果。這個效果實現的方法相對來說比較簡單,只需要在CSS樣式表中設置相應的代碼即可。
img:hover { /* 鼠標移入時的CSS樣式 */ } img:active { /* 鼠標點擊時的CSS樣式 */ } img:focus { /* 圖片獲取焦點時的CSS樣式 */ }
在上述的代碼中,我們可以看到,需要使用:hover、:active和:focus這幾個CSS偽類來實現鼠標移過圖片時的效果。
下面,我們來分別看一下這幾個偽類的具體作用:
1. :hover
img:hover { width: 200px; height: 200px; }
上述的代碼表示,當鼠標移動到圖片上時,圖片的寬度和高度都會變成200px。
2. :active
img:active { opacity: 0.5; }
上述的代碼表示,當鼠標點擊圖片時,圖片的透明度會變成0.5。
3. :focus
img:focus { border: 1px solid red; }
上述的代碼表示,當圖片獲得焦點時,會在圖片周圍加上1像素的紅色邊框。
總的來說,使用CSS中的:hover、:active和:focus這三個偽類,可以很方便地實現鼠標移過圖片時的特殊效果。如果你想讓你的網站看起來更加酷炫,那么不妨試試這些效果吧!