css hover 鼠标悬停来控制其他元素

鼠标悬停来控制其他元素，我们经常会用JS来写。

其实也可以用css来写。

1、同级相邻

<div class="a"></div>

<div class="b"></div>

css可以这样写

.a:hover + .b{

/*悬停在a，b里面的样式变化，比如变色、显示隐藏*/

}

2、同级不相邻

<div class="a"></div>

<div class="b"></div>

<div class="c"></div>

css可以这样写

.a:hover ~ .c{

/*悬停在a，c里面的样式变化，比如变色、显示隐藏*/

}

3、子级  只包一层

<div class="a">

    <div class="b">

    </div>

</div>

css可以这样写

.a:hover>.b{

/*悬停在a，b里面的样式变化，比如变色、显示隐藏*/

}

4、后代级 可以包好多层

<div class="a">

    <div>

        <div class="b">

        </div>

    </div>

</div>

css可以这样写

.a:hover  .b{

/*悬停在a，b里面的样式变化，比如变色、显示隐藏*/

}