jQuery事件處理/傳播/冒泡？

Question

我正在嘗試為網站創建菜單，為此使用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>

在jQuery中，

$(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();
  });
})

當用戶將鼠標懸停在menuNode上時，應該顯示menuSelect（確實如此），但是如果我將鼠標懸停在menuAnchor或span上，它將觸發mouseout事件，然后觸發mouseover事件。

因此，如果說，我將鼠標懸停在menuNode上，然后移至范圍，然后再次移至menuNode，它將觸發mouseover事件3次。 在單擊事件之前，我曾有此行為，但似乎用於解決此問題的方法不適用於此問題。

有什么建議么？

Answer 1

正如@ Beetroot-Beetroot所建議的那樣，mouseenter / mouseleave提供了幫助，並結合了TimeOut從menuNode更改為menuSelect（進入時為300毫秒，離開時為500毫秒）。