我有一个父元素,当鼠标悬停在其上时会显示一个元素。我还有一个子元素,当鼠标悬停在该子元素上时会显示不同的元素。
我不希望它们同时触发 - 即,如果您将鼠标悬停在子元素上,我只想显示它的关联元素 - 并抑制父元素的悬停。
我无法让它可靠地工作。可能缺少一些明显的东西。有什么想法吗?
编辑 - 说明:
在这种情况下,“父”和“子”是独立的可重用组件,彼此不了解,因此我实际上无法将上下文从一个组件注入(inject)到另一个组件中
这是我使用 jQuery 和 hoverIntent 设置的演示插件。
HTML:
<div id="parentBar">
<ul id="childMenu">
<li>Menu 1</li>
</ul>
</div>
<div id="barInfo">
<p>This is shown when hovering overing inside of the parent bar.</p>
</div>
<div id="menuInfo">
<p>This is shown when hovering over inside of the child menu.</p>
</div>
CSS:
#parentBar{width:500px;border:solid 1px black;}
#childMenu{margin-left:10px;padding-left:10px;width:100px;border:solid 1px green;}
#menuInfo, #barInfo{display:none;}
JavaScript:
$('#parentBar').hoverIntent({
//interval: 500,
over: function(e) {
$('#barInfo').show();
},
out: function(e) {
$('#barInfo').hide();
}
});
$('#childMenu').hoverIntent({
//interval: 250,
over: function(e) {
$('#menuInfo').show();
},
out: function(e) {
$('#menuInfo').hide();
}
});
$('#childMenu').bind('mouseenter', function(e){
e.stopPropagation();
});
您可以在 jsFiddle 上查看:http://jsfiddle.net/hNqQ7/1
最佳答案
var flag = false;
$('#parentBar').hoverIntent({
interval: 500,
over: function(e) {
if(!flag) {
$('#barInfo').show();
}
},
out: function(e) {
$('#barInfo').hide();
}
});
$('#childMenu').hoverIntent({
interval: 250,
over: function(e) {
$('#menuInfo').show();
},
out: function(e) {
$('#menuInfo').hide();
}
}).mouseenter(function(){
flag= true;
}).mouseleave(function(){
flag = false;
});
关于jquery - 当子元素上的hoverIntent触发时,如何取消父元素上的hoverIntent?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6129393/