CSS中偽類選擇器hover怎么使用

這篇文章主要講解了“CSS中偽類選擇器hover怎么使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS中偽類選擇器hover怎么使用”吧！

創(chuàng)新互聯(lián)長期為近千家客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網生態(tài)環(huán)境。為香河企業(yè)提供專業(yè)的成都網站設計、成都網站制作，香河網站改版等技術服務。擁有10多年豐富建站經驗和眾多成功案例,為您定制開發(fā)。

偽類選擇器hover可以在鼠標移到鏈接上時設置一些特殊樣式，比如字體大小,背景顏色，顯示隱藏等等。

注意：偽類選擇器hover 可以作用于所有元素，不僅僅是鏈接。

與hover類似的選擇器還有l(wèi)ink，visited，active。 link 選擇器可以設置未被訪問過的鏈接樣式， visited 選擇器可以設置已被訪問過的鏈接樣式，active選擇器可以設置被激活的鏈接樣式。不清楚的同學可以參考 CSS視頻教程。

用法1：當鼠標經過鏈接時改變其自身的樣式（hover后面直接接樣式）

描述：當鼠標經過時，a標簽的字體顏色變?yōu)榧t色，字體變大，代碼如下：

<!DOCTYPE html>

<html>

<head>

.aa{text-decoration: none;color: #000000;}

.aa:hover{color: red;font-size: 20px ;}

</style>

</head>

<body>

<a href="#" class="aa">歡迎大家來PHP中文網學習交流</a>

</body>

</html>

第一張圖是原來的效果，第二張圖是鼠標經過后實現(xiàn)的效果。

CSS中偽類選擇器hover怎么使用

用法2：用偽類選擇器hover控制其子元素的樣式（hover后面加空格再接要改變元素的樣式）

描述：當鼠標經過時div時，其子元素的顏色變?yōu)樽仙?，字體變大，出現(xiàn)紅色邊框，代碼如下：

<!DOCTYPE html>

<html>

<head>

.aa{text-decoration: none;color: #000000;}

.box:hover .aa{color: purple;font-size: 30px ;border: 1px solid red;}

</style>

</head>

<body>

</div>

</body>

</html>

效果如下圖所示：

CSS中偽類選擇器hover怎么使用

用法3：當鼠標經過時控制其兄弟元素的樣式（hover后面加“+”再接要改變元素的樣式）

描述：鼠標經過時其兄弟元素的背景顏色變?yōu)辄S色，字體變大，代碼如下：

<!DOCTYPE html>

<html>

<head>

.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怎么使用”的內容了，經過本文的學習后，相信大家對CSS中偽類選擇器hover怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！

分享標題：CSS中偽類選擇器hover怎么使用
當前路徑：http://muchs.cn/article48/jojhhp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站排名、外貿建站、面包屑導航、品牌網站建設、小程序開發(fā)、商城網站

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容