Question

我无法找到帮助的东西。我有两个元素，一个在另一个内部。两者都有鼠标悬停监听器。

问题是，只有包装元素的侦听器被触发，即使我将内部元素的z-index设置得更高，我也无法让其他侦听器工作。

我在考虑jquery排除选择？但我确信有一个更简单，更好的解决方案。

以下是代码：

#outer{
    width:500px;height:500px;position:absolute;
    z-index:1;
}
#inner{
    padding:10px;position:relative;top:50%;left:50%;
    z-index:2;
}

<div id='outer'>
    <span id='inner'>&nbsp;</span>
</div>

$('#outer').mouseover(function(){ console.log('outer'); });
$('#inner').mouseover(function(){ console.log('inner'); });

为什么z-index在这种情况下不起作用？我确定如果我将两个对象相互浮动，或者一个是文档对象，另一个是div内部，情况会是相同的。

Answer 1

你可以欺骗事情。首先向class div添加outer，然后使用mouseover事件而不是mouseenter事件，并在该类上绑定此事件。

像这样

$('.outer').mouseenter(function(){ console.log('outer'); });

而不是在mouseover div上使用inner事件使用hover事件。

在hover事件中，第一个function会在mouseover上呼叫，在mouseout上呼叫第二个。

诀窍是，在第一个函数中我们删除父div的类，即outer div，在第二个函数中，我们再次添加该类，并触发父div的mouseenter事件。

像这样

$('#inner').hover(function(){
    $parent = $(this).parent();
    $parent.removeClass("outer");
    console.log('inner'); 
},function(){
    $parent.addClass("outer").trigger("mouseenter");
});

这就是你如何完成任务。

这是DEMO

当元素重叠时，Jquery鼠标悬停不起作用

1 个答案: