首頁 > 文章 > web前端 > css：hover偽類的使用方法

css：hover偽類的使用方法

一个新手原創: 2017-10-20 11:05:593569瀏覽

：hover的使用，即當滑鼠指標移入元素時，所做的樣式設定

範例一

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>demo01</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            width: 300px;
            margin-top: 10px;
            background: #ff0000;
        }
        ul li:hover{
            background: #000000;
        }
    </style></head><body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul></body></html>

以上情況存在於當滑鼠指標移入元素，經由：hover使該元素本身改變新的樣式

範例二

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>demo01</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 300px;
            height: 300px;
            border: 1px solid #ff9f5a;
        }
        .content{
            width: 100px;
            height: 100px;
            background: #27e7ff;
        }
        .container:hover .content{
            background: #000000;
        }
    </style></head><body>
    <p class="container">
        <p class="content"></p>
    </p></body></html>

以上範例中，當存在父子關係的時候，可以透過父級的：hover使得子級的樣式改變，寫法為 .container:hover .content，hover後面有一個空格；但是，子級：hover改變不了父級的樣式

範例三

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>demo01</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 300px;
            height: 300px;
            border: 1px solid #ff9f5a;
        }
        .content{
            width: 100px;
            height: 100px;
            background: #27e7ff;
        }
        .container:hover +.content{
            background: #000000;
        }
    </style></head><body>
    <p class="container"></p>
    <p class="content"></p></body></html>

以上範例，當兩個元素不是父子關係，為同胞兄弟關係時，則透過 .container:hover .content這樣的寫法是無效的，則需要透過「+」號，即 .container:hover +.content才能顯示出效果；但是要注意兩個元素的先後順序哦~

以上是css：hover偽類的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：老手總結10個妨礙進步的學習方式下一篇：老手總結10個妨礙進步的學習方式

看更多