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

1，父对子
是指父元素触发hover事件，并且控制父元素中的子元素做出响应。

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

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

当鼠标移入d1时触发hover事件，其子元素p1的color变为#fff

2，子对父
是指子元素触发hover事件时，其父元素做出相关相应。

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

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

使用~号标签来实现对上层元素的控制，当然通过该标签其实是可以控制任意元素的，不仅仅是父元素。
3，同级控制
指处在统一层级的元素的hover控制关系。

<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;
}

同级元素之间可用+号进行控制。