CSS實現(xiàn)鼠標(biāo)懸停改變其他標(biāo)簽樣式的示例代碼

發(fā)布時間：2020-08-19 11:13:23 作者：@小聶同學(xué)

這篇文章主要介紹了CSS實現(xiàn)鼠標(biāo)懸停改變其他標(biāo)簽樣式的示例代碼,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前言：

據(jù)我了解目前CSS只能控制懸停時改變該標(biāo)簽下面的兄弟標(biāo)簽和子標(biāo)簽樣式，如有大佬有好的方法請指教！
控制其他標(biāo)簽（根據(jù)控制標(biāo)簽與被控制標(biāo)簽之間的關(guān)系）可分為三種類型如下：

本文中控制標(biāo)簽為 .div1
被控制標(biāo)簽為 .div2

1.控制子標(biāo)簽（.div1:hover和.div2之間使用空格）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .div1,.div2 {
                width: 200px;
                height: 100px;
                background-color: pink;
            }
            .div2 {
                background-color: aqua;
                display: none;
            }
            .div1:hover .div2 {
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="div1">div1
            <div class="div3">div3</div>
            <div class="div2">div2</div>
        </div>
    </body>
</html>

被控制標(biāo)簽只要是控制標(biāo)簽的子標(biāo)簽就可以，里有其他標(biāo)簽（如.div3）不會影響效果！

2.控制兄弟標(biāo)簽（.div1:hover和.div2之間使用+）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .div1,.div2 {
                width: 200px;
                height: 100px;
                background-color: pink;
            }
            .div2 {
                background-color: aqua;
                display: none;
            }
            .div1:hover+.div2 {
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <!-- <div class="div3">div3</div> -->
        <div class="div2">div2</div>
    </body>
</html>

使用“+”時，.div2必須緊貼在.div屁股后面才會有效果，否則無效！??！例如：將.div3取消注釋后，.div1將無法控制.div2的樣式?。?！如果控制標(biāo)簽和被控制標(biāo)簽中間有內(nèi)容，需要按照第三種方式寫！

3.控制兄弟標(biāo)簽（中間有內(nèi)容）（.div1:hover和.div2之間使用~）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .div1,.div2 {
                width: 200px;
                height: 100px;
                background-color: pink;
            }
            .div2 {
                background-color: aqua;
                display: none;
            }
            .div1:hover~.div2 {
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <div class="div3">div3</div>
        <div class="div2">div2</div>
    </body>
</html>

這種方法的使用要求是被控制標(biāo)簽必須在控制標(biāo)簽的下面，中間可以有任意內(nèi)容。

總結(jié)：

控制子標(biāo)簽	中間使用空格
控制緊貼后面的兄弟標(biāo)簽	中間使用“+”
控制后面任意兄弟標(biāo)簽	中間使用“~”