如果鼠标通过另一个面板离开,弹出窗口需要保持不变

时间:2013-07-02 10:08:41

标签: javascript jquery

我正在尝试通过我的一个组件(DIV A)在弹出窗口(DIV B)上创建一个鼠标。它基本上是当用户将鼠标悬停在表项上时出现的过滤器弹出窗口。

这是显示鼠标移动的图表:

diagram mouse movements

  1. 鼠标进入DIV A,DIV B弹出。
  2. 鼠标离开DIV A,DIV B消失。
  3. 鼠标将DIV A留在DIV B中,但DIV B仍然保持打开状态
  4. 鼠标离开DIV B,DIV B消失。
  5. 我正在使用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.
    });
    

    我有什么想法可以做到这一点吗?

1 个答案:

答案 0 :(得分:1)

mouseenter&添加mouseleaveB个事件当这些事件发生时触发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解决方案将更有效率。

HTML:

<div class='parent'>
  <div id='A'></div>
  <div id='B'></div>
</div>

CSS:

#B { display: none;}
.parent:HOVER #B { display: block;}