通过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能更通过为元素绑定事件以实现样式、内容的动态更新。