CSS实现鼠标悬停改变其余标签样式

时间 2020-09-19 标签 css 实现鼠标悬停改变其余标签样式

CSS实现鼠标悬停改变其余标签样式

前言：
据我了解目前CSS只能控制悬停时改变该标签下面的兄弟标签和子标签样式，若有大佬有好的方法请指教！
控制其余标签（根据控制标签与被控制标签之间的关系）可分为三种类型以下：css

本文中控制标签为 .div1
被控制标签为 .div2

控制子标签（.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>

被控制标签只要是控制标签的子标签就能够，里有其余标签（如.div3）不会影响效果！html

控制兄弟标签（.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的样式！！！若是控制标签和被控制标签中间有内容，须要按照第三种方式写！spa

控制兄弟标签（中间有内容）（.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>

这种方法的使用要求是被控制标签必须在控制标签的下面，中间能够有任意内容。

总结：

控制子标签code	中间使用空格htm
控制紧贴后面的兄弟标签utf-8	中间使用“+”ci
控制后面任意兄弟标签it	中间使用“~”table

若有错误之处，敬请指教！class