CSS hover 父对子、子对父、同级之间的控制

1.父元素控制子元素

<div class="d1">
	<p class="p1">hello</p>
</div>

.d1:hover .p1{
	color:#fff
}

2.子元素控制父元素

<div class="d1">
	<p class="p1">hello</p>
</div>

.p1:hover ~ .d1{
	background-color: #fff;
}

3.同级控制

<div class="d1">
	<p class="p1">hello</p>
</div>
<div class="d2">
	<p class="p1">hello</p>
</div>

.d1:hover + .d2{
	background-color: #fff;
}
.d1:hover + .d2 .p1{
	color: #fff;
}