1. 程式人生 > >hover事件2,滑鼠移入一個標籤使其子級標籤的css樣式發生改變,顯示可見

hover事件2,滑鼠移入一個標籤使其子級標籤的css樣式發生改變,顯示可見

html程式碼:

<div class="father">滑鼠移入顯示

<p class="child">隱藏內容,經過滑鼠移入後展示。</p>

</div>

css程式碼:

.father .child{

   display:none;   //p的內容一開始設定為不可見

}

.father:hover .child{

     display:block;    //滑鼠移入後,p的標籤的內容為可見

}

這裡有一點要注意,要顯示的內容必須存在於其父級標籤(即div標籤)的子集標籤(即p標籤)中,否則無法生效。

這裡只是通過css來實現顯示隱藏效果,還可以通過js來控制,這個以後有空再寫啦。