我正在尝试通过我的一个组件(DIV A)在弹出窗口(DIV B)上创建一个鼠标。它基本上是当用户将鼠标悬停在表项上时出现的过滤器弹出窗口。
这是显示鼠标移动的图表:
我正在使用jQuery鼠标悬停步骤(1),它可以正常工作。我正在使用jQuery mouseLeave用于步骤(2),它也能正常工作。
我的问题是步骤(3)。我正试着听老鼠离开 DIV A ,但如果它通过 DIV B 离开 DIV A ,那么请不要删除 DIV B 。我想以某种方式说如果mouseLeaves,但鼠标已经结束 DIV B ,那么就不要隐藏它。某种mouseOver事件?一个mouseMotion监听器?
这是我到目前为止的代码:
$(this.filterFlag).mouseover(function(){
self.view.appendChild(self.pop.getView());
});
$(this.filterFlag).mouseleave(function(){
self.view.removeChild(self.pop.getView());
//but if mouse leaves into the popup, don't hide pop up.
});
我有什么想法可以做到这一点吗?
答案 0 :(得分:1)
为mouseenter
&添加mouseleave
,B
个事件当这些事件发生时触发A
的相应事件。这是非常低效的,但有效。
另请注意,如果self.pop.getView()
为每次通话返回相同的元素,则必须取消绑定&重新启动事件。
$(this.filterFlag).mouseover(function(){
var that = this;
var c = self.pop.getView();
self.view.appendChild(c);
$(c).mouseenter(function() {
$(that).mouseenter();
})
.mouseleave(function() {
$(that).mouseleave();
});
});
$(this.filterFlag).mouseleave(function(){
self.view.removeChild(self.pop.getView());
//but if mouse leaves into the popup, don't hide pop up.
});
以下是 fiddle.
的示例CSS解决方案将更有效率。
<div class='parent'>
<div id='A'></div>
<div id='B'></div>
</div>
#B { display: none;}
.parent:HOVER #B { display: block;}