實例示範CSS中偽類選擇器hover的使用方法
- yulia原創
- 2018-10-23 15:47:215281瀏覽
在頁面佈局時，常會用到CSS中的hover選擇器，它可以設定滑鼠經過時的特殊樣式，作為一個前端開發人員，你知道CSS偽類選擇器hover怎麼使用嗎？這篇文章就跟大家講講CSS中hover的使用方法及實例示範，有一定的參考價值，有興趣的朋友可以看看。
偽類選擇器hover可以在滑鼠移到連結上時設定一些特殊樣式，例如字體大小,背景顏色，顯示隱藏等等。
注意：偽類選擇器hover 可以作用於所有元素，而不僅僅是連結。
與hover類似的選擇器還有link，visited，active。 link 選擇器可以設定未被造訪過的連結樣式， visited 選擇器可以設定已被造訪過的連結樣式，active選擇器可以設定已啟動的連結樣式。不清楚的同學可以參考 CSS影片教學。
用法1：當滑鼠經過連結時改變自己的樣式（hover後面直接接樣式）
描述：當滑鼠經過時，a標籤的字體顏色變為紅色，字體變大，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{text-decoration: none;color: #000000;}
.aa:hover{color: red;font-size: 20px ;}
</style>
</head>
<body>
<a href="#" class="aa">欢迎大家来PHP中文网学习交流</a>
</body>
</html>第一張圖是原來的效果，第二張圖是滑鼠經過後實現的效果。
用法2：用偽類別選擇器hover控制其子元素的樣式（hover後面加空格再接要改變元素的樣式）
描述：當滑鼠經過時div時，其子元素的顏色變成紫色，字體變大，出現紅色邊框，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{text-decoration: none;color: #000000;}
.box:hover .aa{color: purple;font-size: 30px ;border: 1px solid red;}
</style>
</head>
<body>
<div class="box">
<a href="#" class="aa">望子成龙，望女成凤</a>
</div>
</body>
</html>效果如下圖所示：
用法3：當滑鼠經過時控制其兄弟元素的樣式（hover後面加上「 」再接著改變元素的樣式）
描述：滑鼠經過時其兄弟元素的背景顏色變為黃色，字體變大，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{text-decoration: none;color: #000000;}
.box1:hover + .box2{font-size: 30px ;background: yellow;}
</style>
</head>
<body>
<div class="box1">床前明月光</div>
<div class="box2">疑是地上霜</div>
</body>
</html>效果圖：
以上給大家介紹了CSS中偽類別選擇器hover的使用方法，初學者可以自己動手嘗試，看看你的程式碼能不能實現效果，希望這篇文章對你有幫助！
以上是實例示範CSS中偽類選擇器hover的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn