當鼠標懸停在其上時,很容易突出顯示div
。懸停突出顯示分層div
但是,當div
s在彼此內部時,父母對div
的其餘部分進行遮蔽。我應該如何讓CSS懸停在直接懸停的div
上?
當我將鼠標懸停在parrot
上時,我不想讓bird
或animal
突出顯示。
div.creature{
margin:5px;
padding:5px;
border: 1px solid;
}
div.creature:hover{
background: #ffeeaa;
}
<div class="creature">
animal
<div class="creature">
mammal
<div class="creature">
cat
</div>
</div>
<div class="creature">
bird
<div class="creature">
parrot
</div>
<div class="creature">
duck
</div>
</div>
</div>
UPDATE
的HTML代碼是動態創建的。因此,獨立的CSS是首選。
當我徘徊在bird
而不是parrot
或duck
,我期望整個bird
亮點。
非常感謝你。有兩個問題。我預計,在「鳥」或「哺乳動物」本身上盤旋,突出他們的整個「div」。 'div'也是動態創建的。因此,我不知道在CSS中寫什麼。 – ar2015
我已經更新了我的答案。現在它按照你的期望工作。已經添加了一個額外的jQuery函數,所以不要忘記將jQuery文件包含在您的項目中。 – Saurabh
非常感謝。如果我動態地向「div」添加內容,是否需要再次運行jquery代碼? – ar2015