鼠标进入兄弟元素，改变同级兄弟元素的样式

发表于：2023-09-06 13:59:35浏览：76次TAG： #CSS

<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>

.a{
    width:300px;
    height:300px;
    background-color:red;
}
.b{
    width:200px;
    height:200px;
    background-color:blue;
}
.c{
    width:100px;
    height:100px;
    background-color:yellow;
}

/* 鼠标进入兄弟元素，改变其相邻的兄弟元素的样式 */
.a:hover+.b{
    background-color:green;
}

/* 鼠标进入兄弟元素，改变其他兄弟元素的样式 */
.a:hover~.c{
    background-color: pink;
}

栏目分类全部>