Question

我有一个包含图像（子）和span（子）的锚标记（父）。当锚标记上的用户mouseover时，我想显示一个下拉div。

当用户第二次将鼠标悬停在该锚标记上时，该下拉列表应隐藏。

我在锚标记上添加了mouseover个事件到toggle下拉列表。但它不起作用。我甚至在子元素上添加了stopPropogation()。

当我在锚标记上mouseover时，会显示下拉列表。但是如果我在span或div上移动鼠标，则下拉隐藏。

这是工作JSfiddle

这是HTML：

<a href="#header-cart" id="custom_headercart" class="skip-link skip-cart" style="border: 1px solid black">    
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRTClkntD56hOwVYr-e1blK4kXVusYujzM-ErrlL6QhonsYjqdK" alt="" width=18>
    <span>12</span>
 </a>

<div id="dropdown_div" style="display: none">
    Dropdown div content
</div>

这里是jQuery

$("#custom_headercart").on("mouseover", function(){
    $("#dropdown_div").toggle();
})

$j("#custom_headercart span").mouseover(function(event){
 event.stopPropagation();
});

$j("#custom_headercart img").mouseover(function(event){
 event.stopPropagation();
});

修改下拉列表应显示并隐藏在备用mouseover上。就像我第一次mouseover一样，它应该显示下拉列表。然后，如果我搬出（下拉列表不应该隐藏）和mouseover，那么它应该隐藏。

Answer 1

听起来您只需要使用mouseenter代替mouseover。这样你就不需要阻止子元素的传播。

Here's a fiddle

Answer 2

您正在将停止传播应用于父级，将其应用于子级，因为它阻止＆＃34; event bubbling＆＃34;不是＆＃34; Event capturing＆＃34;

嵌套元素甚至在stopPropagation之后触发父事件

2 个答案:

Here's a fiddle