css:hover僞類的使用

:hover的使用,即當鼠標指針移入元素時,所作出的樣式設置html

示例一

<!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使該元素自身改變新的樣式spa

示例二

<!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>
    <div class="container">
        <div class="content"></div>
    </div>
</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>
    <div class="container"></div>
    <div class="content"></div>
</body>
</html>

 以上示例,當兩個元素不是父子關係,爲同胞兄弟關係時,則經過 .container:hover .content這樣的寫法是無效的,則須要經過「+」號,即 .container:hover +.content才能顯示出效果;可是要注意兩個元素的前後順序哦~
code

      不足之處,請多多指教…htm

相關文章
相關標籤/搜索