自拍亚洲一区欧美另类,亚洲成人影院,亚洲午夜久久久久妓女影院,最近中文字幕高清中文字幕无,亚洲熟妇av一区二区三区漫画

學(xué)習(xí)筆記

精準(zhǔn)傳達(dá) ? 價(jià)值共享

洞悉互聯(lián)網(wǎng)前沿資訊,探尋網(wǎng)站營銷規(guī)律

css:hover偽類的使用

作者:狐靈科技 | 2020-02-06 20:27 |點(diǎn)擊:

:hover的使用,即當(dāng)鼠標(biāo)指針移入元素時(shí),所做出的樣式設(shè)置

示例一

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

 

 以上情況存在于當(dāng)鼠標(biāo)指針移入元素,通過: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 class="content"></div>
    </div>
</body>
</html>

 以上示例中,當(dāng)存在父子關(guān)系的時(shí)候,可以通過父級(jí)的:hover使得子級(jí)的樣式發(fā)生改變,寫法為 .container:hover .content,hover后面有一個(gè)空格;但是,子級(jí):hover改變不了父級(jí)的樣式

示例三

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

 以上示例,當(dāng)兩個(gè)元素不是父子關(guān)系,為同胞兄弟關(guān)系時(shí),則通過 .container:hover .content這樣的寫法是無效的,則需要通過“+”號(hào),即 .container:hover +.content才能顯示出效果;但是要注意兩個(gè)元素的先后順序哦~

      不足之處,請(qǐng)多多指教…

內(nèi)容來源于網(wǎng)絡(luò)如有侵權(quán)請(qǐng)私信刪除
如沒特殊注明,文章均為狐靈科技原創(chuàng),轉(zhuǎn)載請(qǐng)注明?? "css:hover偽類的使用
多一份免費(fèi)策劃方案,總有益處。

請(qǐng)直接添加技術(shù)總監(jiān)微信聯(lián)系咨詢

網(wǎng)站設(shè)計(jì) 品牌營銷

多一份參考,總有益處

聯(lián)系狐靈科技,免費(fèi)獲得專屬《策劃方案》及報(bào)價(jià)

咨詢相關(guān)問題或預(yù)約面談,可以通過以下方式與我們聯(lián)系

業(yè)務(wù)熱線:15082661954 / 大客戶專線:15523356218