0

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

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

图鼠标移动

  1. 鼠标进入DIV A，DIV B弹出。
  2. 鼠标离开 DIV A，DIV B 消失。
  3. 鼠标离开 DIV A 进入 DIV B，但 DIV B 仍保持打开状态
  4. 鼠标离开 DIV B，DIV B 消失。

我在步骤(1)中使用 jQuery 鼠标悬停，效果很好。我在步骤(2)中使用了 jQuery mouseLeave，它也可以正常工作。

我的问题是步骤(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.
});

任何想法我怎么能做到这一点？

4

1 回答 1

1

添加mouseenter, mouseleaveevents for B& 当这些事件发生时 triggerA的相应事件。这是非常低效的，但有效。

还要记住，如果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.
});

这是一个示例小提琴。

CSS 解决方案会更有效率。

HTML：

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

CSS：

#B { display: none;}
.parent:HOVER #B { display: block;}
于 2013-07-02T10:22:48.560 回答