CSS中的hover设置

1. 父子关系

父子关系：即需要添加效果的元素包裹在hover元素里，可以直接在父标签后紧跟hover再加空格，后面跟上子元素类名即可。

html

<div class="box1">
	<div class="box2">
</div>

css

.box1:hover .box2{display:block}

2. 兄弟关系

兄弟关系：即两个元素是同级关系。需要将父子关系中的空格换成加号“+”。

html

<div class="box1"></div>
<div class="box2"></div>

css

.box1:hover+.box2{display:block}