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