首頁 > web前端 > css教學 > 實例示範CSS中偽類選擇器hover的使用方法

實例示範CSS中偽類選擇器hover的使用方法

yulia
發布: 2018-10-23 15:47:21
原創
5287 人瀏覽過

在頁面佈局時,常會用到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

<!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>

登入後複製

第一張圖是原來的效果,第二張圖是滑鼠經過後實現的效果。

實例示範CSS中偽類選擇器hover的使用方法

實例示範CSS中偽類選擇器hover的使用方法

用法2:用偽類別選擇器hover控制其子元素的樣式(hover後面加空格再接要改變元素的樣式)

描述:當滑鼠經過時div時,其子元素的顏色變成紫色,字體變大,出現紅色邊框,程式碼如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!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>

登入後複製

效果如下圖所示:

實例示範CSS中偽類選擇器hover的使用方法

用法3:當滑鼠經過時控制其兄弟元素的樣式(hover後面加上「 」再接著改變元素的樣式)

描述:滑鼠經過時其兄弟元素的背景顏色變為黃色,字體變大,程式碼如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!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的使用方法,初學者可以自己動手嘗試,看看你的程式碼能不能實現效果,希望這篇文章對你有幫助!

以上是實例示範CSS中偽類選擇器hover的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板