Javascript jQuery事件处理/传播/冒泡？

我正在尝试为一个网站创建一个菜单，我正在使用jQuery进行此操作，我遇到了一个小问题

我有这个结构

<div class="menuTitle menuDiv menuNode" id="menuNode_<?=$row_menu["id"]?>">
    <a href="<?=$rt?>" class="menuAnchor" onclick="return registerMenuClick($(this).parent())">
        <span><?=$nodeName?></span>
    </a>
</div>

<div class="menuSelect" id="menuSelect_<?=$row_menu["id"]?>" align="center"><?=$nodeName?></div>

当用户将鼠标悬停在menuNode上时，应该显示menuSelect（确实如此），但如果我将鼠标悬停在menuAnchor或span上，则会触发mouseout事件，然后触发mouseover事件

所以，如果说，我把鼠标放在menuNode上，移动到span上，然后再移动到menuNode上，它会触发mouseover事件3次。我以前在单击事件中遇到过这种情况，但用于解决此问题的方法似乎无法解决此问题

---

有什么建议吗？

正如@Beetroot Beetroot所建议的，mouseenter/mouseleave有帮助，加上从menuNode切换到menuSelect的超时时间（回车时300毫秒，离开时500毫秒）。

尝试“mouseenter”和“mouseleave”，而不是“mouseover”和“mouseout”。示例说明，请参见DOM事件规范。

$(document).ready(function(){
    $(".menuNode, .menuSelect").live("mouseover",function(event){
    MenuBar.selectedID = $(this).attr("id").replace("menuNode_","").replace("menuSelect_","");
    MenuBar.showThisBranch();
  }).live("mouseout",function(event){
    MenuBar.selectedID = $(this).attr("id").replace("menuNode_","").replace("menuSelect_","");
    MenuBar.hideThisBranch();
  });
})