Javascript Jquery鼠标指针触发父元素

我正在尝试创建firebug类型的滚动元素选择器，但似乎在滚动触发包含目标元素的父元素时遇到问题

请参见以下示例：

页面上有3个div，都有mouseenter/mouseleave侦听器，最大的一个完全独立于其他两个，第二个最大的div位于最大的div的顶部，但不包含在其中，而sallest嵌套在第二个最大的div（其父级）中。如果你看源代码，你可能更容易想象

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

但是当你的鼠标离开最小的粉红色分区，到中间的黑色分区时，中间的分区不会开火，这可能是因为鼠标从未真正离开过中间分区，所以没有开火

我知道在这种情况下，我可以添加$this.parent.triggermouseover；每个div上的mouseleave侦听器，但在每个示例中都不起作用。例如，一个div嵌套在其父对象中，但位于页面上该父对象的外部

我需要一些新颖的解决方案，它的工作原理与firebug非常相似，元素选择器工具允许您在页面上滚动元素并单击以选择它们，然后触发它以显示该元素的源

非常感谢您的帮助。

这就是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");       
});