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

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

目標:滑鼠移入一個標籤使其子級標籤顯示可見。

html程式碼:

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

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

</div>

css程式碼:

.father .child{

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

}

.father:hover .child{

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

}

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