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

我有一个锚标记(父标记),其中包含一个图像(子标记)和一个跨度(子对象)。有一个下拉菜单,当用户 mouseover 在锚定标签上。

当用户鼠标悬停时,该下拉列表应隐藏 第二次在锚标签上 .

我添加了 鼠标悬停 锚标记上的事件 toggle 下拉列表。但它不起作用。我甚至补充了 stopPropogation() 在子元素上。

当我 鼠标悬停 在锚标记上,显示下拉列表。但是如果我把鼠标移到 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();
});

编辑: 下拉列表应显示和隐藏在备用项上 鼠标悬停 。就像我 鼠标悬停 第一次,它应该显示下拉列表。然后,如果我移出(下拉列表不应隐藏) 鼠标悬停 再次,那么它应该隐藏起来。