css:hover状态改变另一个元素样式

例如有如下dom结构：

 <div>
    <div class="a">
    	<span class="b" >xxx</span>
    </div>
    <div id="c">xxx</div>    
</div>

hover的作用方法：

1、改变本身样式

 .a:hover {
      color: red;
  }

2、如果你.b元素是.a元素的子元素，可以直接通过 .a .b {…}这种方式定义CSS样式来控制

 .a:hover .b{
      color: red;
  }

3、.a与.b是亲兄弟关系，有相同的父节点，且.b跟.a紧临，可以通过 .a + .b{…}来控制.b里面的元素样式；

  .a:hover + .b{
      color: red;
  }