在頁面佈局時,常會用到CSS中的hover選擇器,它可以設定滑鼠經過時的特殊樣式,作為一個前端開發人員,你知道CSS偽類選擇器hover怎麼使用嗎?這篇文章就跟大家講講CSS中hover的使用方法及實例示範,有一定的參考價值,有興趣的朋友可以看看。
偽類選擇器hover可以在滑鼠移到連結上時設定一些特殊樣式,例如字體大小,背景顏色,顯示隱藏等等。
注意:偽類選擇器hover 可以作用於所有元素,而不僅僅是連結。
與hover類似的選擇器還有link,visited,active。 link 選擇器可以設定未被造訪過的連結樣式, visited 選擇器可以設定已被造訪過的連結樣式,active選擇器可以設定已啟動的連結樣式。不清楚的同學可以參考 CSS影片教學。
用法1:當滑鼠經過連結時改變自己的樣式(hover後面直接接樣式)
描述:當滑鼠經過時,a標籤的字體顏色變為紅色,字體變大,程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
第一張圖是原來的效果,第二張圖是滑鼠經過後實現的效果。
用法2:用偽類別選擇器hover控制其子元素的樣式(hover後面加空格再接要改變元素的樣式)
描述:當滑鼠經過時div時,其子元素的顏色變成紫色,字體變大,出現紅色邊框,程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
效果如下圖所示:
用法3:當滑鼠經過時控制其兄弟元素的樣式(hover後面加上「 」再接著改變元素的樣式)
描述:滑鼠經過時其兄弟元素的背景顏色變為黃色,字體變大,程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
效果圖:
以上給大家介紹了CSS中偽類別選擇器hover的使用方法,初學者可以自己動手嘗試,看看你的程式碼能不能實現效果,希望這篇文章對你有幫助!
以上是實例示範CSS中偽類選擇器hover的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!