Jquery Mouseenter触发父元素

问题描述：

我想创建一个萤火虫类型滚动元素选择器，但似乎有翻转触发父元素包含我的目标元素的问题。Jquery Mouseenter触发父元素

请看下面的例子：

有在页面上3个div的，所有的mouseenter /鼠标离开听众，最大的是完全独立theother两个，第二大是位置ontop的的最大，但不包含在其中，而最咸的是嵌套在第二大，（它是父母）。如果你看源代码，可能会更容易想象。

如果您单击预览并将鼠标悬停在中央div上，您会注意到第二大div也会继续响应mouseenter事件并保持为红色。为了解决这个问题，我尝试添加$（this）.parent（）。trigger（“mouseout”）;在每个翻车监听器上。

但是他们当你的鼠标离开最小（粉红色）DIV，到中间（黑）格，中间的div不火（大概是因为的mouseenter /鼠标悬停不被解雇的鼠标有我不明白，在这种情况下，我可以在每个div上添加$（this）.parent（）。trigger（“mouseover”）;对于每个div的mouseleave监听器，但它不会在evey示例中工作（例如，嵌套在其父代中的div，但位于页面上的父代之外）。

我需要一些新颖的解决方案，它需要与萤火虫，元素选择器（可让您在页面上滚动元素（使其高亮）的工具非常类似，并单击以选中它们并触发它以显示源代码元件）。

任何帮助非常感谢。

答

这就是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

Jquery Mouseenter触发父元素

相关推荐