鼠标悬停来控制其他元素，我们经常会用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里面的样式变化，比如变色、显示隐藏*/
}
