我正在尝试突出显示页面其余部分的 div/灰色。我的代码是:
jQuery(document).ready(function ($) {
$('.entry-content').mouseover(function(e) {
$('.expose').mouseover(function(e){
$(this).css('z-index','99999');
$('#overlay').fadeIn(300);
});
});
$('.entry-content').mouseleave(function(e) {
$('.expose').mouseleave(function(e){
$('#overlay').fadeOut(0, function(){
$('.expose').css('z-index','1');
});});});});
HTML 看起来像
<div id="overlay">
<div class="entry-content">
<div class="expose">something</div>
<div class="expose">something</div>
<div class="expose">something</div>
</div>
#overlay {
background:rgba(0,0,0,0.3);
display:none;
width:100%; height:100%;
position:absolute; top:0; left:0; z-index:99998;
}
我所追求的是,只要用户将鼠标悬停在条目内容 div 上,将页面保留为灰色并突出显示他悬停的 div。
有什么想法吗? 谢谢
最佳答案
z-index
是相对于堆叠上下文的,而不是相对于文档的。如果您希望 expose
元素出现在覆盖层上,它们必须是同级元素,或者您必须使用 position:*
显式定位 .expose
.
一般来说,元素必须属于同一堆栈上下文才能比较它们的 z-index 值。您可以了解有关堆叠上下文的更多信息 here .
一些补充要点:
- 您应该使覆盖层对指针事件透明。您可以使用
pointer-events:none;
来做到这一点
- 当鼠标悬停在容器上时,您不需要绑定(bind)到
.expose
。将处理程序与用于显示/隐藏覆盖层的处理程序并行绑定(bind)
这是更正后的代码。您可以看到工作演示here :
CSS:
#overlay {
background:rgba(0,0,0,0.3);
display:none;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:99998;
pointer-events:none
}
.expose{
background-color:red;
position:relative;
}
JS:
$('.entry-content').hover(function() {
$('#overlay').fadeIn(300);
}, function() {
$('#overlay').fadeOut(300);
});
$('.expose').hover(function(e) {
$(this).css('z-index', '99999');
},function(e) {
$(this).css('z-index', '1');
});
关于Jquery - 突出显示页面其余部分的 div/灰色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14147451/