溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關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">歡迎大家來億速云學習交流</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就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
