:hover选择器控制另一个元素

情景一：控制兄弟元素

方法：

:hover+

*只能顺序为下一位的兄弟级元素，例如

    <!-- 情景一：控制兄弟级元素 -->
    <div class="one">你们好</div>
    <div class="two">你好啊</div>
    <div class="three">你也好啊</div>
    <style>
        .one,.two,.three{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .one:hover+.two{
            background-color: yellow;
            color: green;
        }           /* 有效 */
        .one:hover+.three{
            background-color: yellow;
            color: green;
        }         /* 无效 */
        .two:hover+.one{
            background-color: yellow;
            color: green;
        }       /* 无效 */
    </style>

情景二：控制子元素

    <div class="parent">
        <div class="child"></div>
    </div>
<style>
    .parent:hover .child{
        background-color:red;
}
</style>

情景三：控制兄弟元素的子元素

  <div class="first"></div>
    <div class="secand">
        <div class="son"></div>
    </div>
   <style>
        .first:hover+.secand .son{
            background-color: blueviolet;
        }
</style>