当鼠标悬停在 div
上时,很容易突出显示它。
但是,当 div
彼此内部时,父级会遮盖其余 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>
更新
HTML 代码是动态创建的。因此,独立的 CSS 是首选。
当我将鼠标悬停在 bird
上而不是 parrot
或 duck
上时,我期望整个 bird
突出显示。
最佳答案
类似这样的吗?
更新:添加了 jQuery 函数
$(function() {
$('div').on('mouseover', function(e){
e.stopPropagation();
$(this).addClass('my-bg');
}).on('mouseout', function(e){
$(this).removeClass('my-bg');
})
});
div.creature{
margin:5px;
padding:5px;
border: 1px solid;
}
.my-bg{
background-color: #ffeeaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
关于html - 将突出显示悬停在分层 div 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45261324/