CSS伪类的作用范围

通过CSS伪类来控制样式只有以下两种情况能实现：

1.修改样式的元素为hover对象自身或其子元素，如：

<div class="div1" style="width:100%;height:300px;background-color:gray;">

<div class="sub-div" style="width:500px;height:100px;background-color:yellow"></div>

</div>

①作用自身：

.div1:hover{

background-color:black;

   }

改变类名为div1的元素的背景颜色；

②作用子元素：

.div1:hover .sub-div{

background-color:blue;

  }

改变类名div1元素下的，类名为sub-div元素的背景颜色。

2：修改样式的元素的hover对象的兄弟元素，如：

<div class="div1" style="width:100%;height:300px;background-color:gray;"></div>

<div class="bro-div" style="width:500px;height:100px;background-color:yellow"></div>

通过“ + ”选择相邻兄弟选择器来实现，具体：

.div1:hover + .bro-div{

background-color:blue;

 }

改变相邻兄弟元素的样式。

注意：只能改变改元素后面的兄弟元素。

对于其他情况(元素间的关系不属于子元素或兄弟元素)，hover效果并不能起到改变样式的作用。

CSS的hover相比于用javascript的onmouseover绑定事件改变效果，hover只能改变元素的样式而不能修改元素内容，而javascript能更通过为元素绑定事件以实现样式、内容的动态更新。