Jquery Mouseenter 触发父元素

Question

我正在尝试创建一个萤火虫类型的翻转元素选择器，但似乎在翻转触发包含我的目标元素的父元素时遇到问题。

请参阅以下示例：

http://jsbin.com/elofe3/edit

页面上有 3 个 div，都带有 mouseenter/mouseleave 侦听器，最大的完全独立于另外两个，第二大的位置在最大的之上但不包含在其中，而最小的则嵌套在第二大的内部， （这是父母）。如果您查看源代码，可能更容易形象化。

如果您单击预览并将鼠标滚动到中央 div 上，您会注意到第二大 div 也继续响应 mouseenter 事件并保持红色轮廓。为了解决这个问题，我尝试添加 $(this).parent().trigger("mouseout"); 在每个翻转侦听器上。

http://jsbin.com/elofe3/4/edit

但是当您的鼠标离开最小（粉红色）div 到中间（黑色）div 时，中间 div 不会触发（大概是因为 mouseenter/mouseover 没有被触发，因为鼠标实际上从未离开过中央 div。

我知道在这种情况下我可以添加 $(this).parent().trigger("mouseover"); 到每个 div 上的 mouseleave 侦听器，但它在每个示例中都不起作用（例如，一个 div 嵌套在其父级中，但位于页面上该父级之外。）

我需要一些新颖的解决方案，它需要与萤火虫元素选择器（该工具可让您在页面上滚动元素（突出显示它们）并单击以选择它们并触发它以显示该元素的源）非常相似）。

非常感谢任何帮助。

Answer 1

这就是方法mouseenter和mouseleave工作。但你是误导，mouseenter是不触发父元素。相反，mouseleave如果您将鼠标悬停在后代上，则不会触发。所以不是再次添加边框，而是永远不会删除边框。

将事件处理程序添加到mouseover和mouseout并防止事件冒泡：

$("div").mouseover(function(e) {
  e.stopPropagation();
  $(this).css("outline", "solid 3px red");     
});

$("div").mouseout(function(e) {
  e.stopPropagation();
  $(this).css("outline", "none");       
});

http://jsbin.com/elofe3/5/edit