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



  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章