hover改变另外一个元素

背景

鼠标移到A，使B、C、D出现动画，纯用css。
此时此刻，需要使用hover

hover的一般用法

hover的最原始用法是：

a:hover
{ 
background-color:yellow;
}

鼠标移动到 a标签上，改变a的背景颜色。
初学的时候都是这么学习的，导致很多人以为只有a标签才有hover。错了，hover是针对所有元素的。

hover的进阶用法

鼠标指在A元素上，使A元素的子元素B改变了样式。代码如下：

   <div class="face">
        <!-- 嘴巴 -->
        <div class="mouth-wrap">
            <!-- <div class="mouth-top"></div> -->
            <div class="mouth left"></div>
            <div class="mouth right"></div>
        </div>
    </div>

鼠标移到脸上，嘴巴微笑

.face:hover .mouth-wrap .mouth {
   border-radius: 40% 0% 50% 50%;
}

hover的更高阶用法

鼠标移到A，改变兄弟元素B的样式，代码如下：

<!-- 脸 -->
 <div class="face">
    aaa
 </div>
 <!-- 耳朵 -->
 <div class="ear-wrap">
     <div class="ear left"> </div>
     <div class="ear right"> </div>
 </div>

 .face:hover+.ear-wrap .left{
 	transform: rotate(-45deg);
 }
  .face:hover+.ear-wrap .right{
      transform: rotate(45deg);
  }

代码链接：https://htmlpreview.github.io/?https://github.com/zthappy/Baidu2018/blob/master/livelyCat/livelycat.html