关于css: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>