css hover控制同級 上級 子級

<div class="div">
	<em class="em">m6</em>
</div>
.div:hover .em{
	color:#fff
}

上面父對子 是指父元素觸發hover事件，並且控制父元素中的子元素做出響應

<div class="div">
	<em class="em">m6</em>
</div>
.em:hover ~ .div{
	background-color: #fff;
}

上面子對父 是指子元素觸發hover事件時，其父元素做出相關相應 使用~號標簽來實現對上層元素的控制，通過該標簽其實是可以控制任意元素的，不僅僅是父元素

<div class="div1">
	<em class="em1">m6</em>
</div>
<div class="div2">
	<em class="em2">m61</em>




</div>
.div1:hover + .div2{
	background-color: #fff;
}
.div1:hover + .div2 .em1{
	color: #fff;
}

以上同級控制 指處在統一層級的元素的hover控制關系 同級元素之間可用+號進行控制