通過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能更通過爲元素綁定事件以實現樣式、內容的動態更新。