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 раза. У меня было такое поведение раньше для события click, но кажется, что метод, используемый для решения этой проблемы, не работает над этой проблемой.

Какие-либо предложения?

Answer 1

Как предложил @Beetroot-Beetroot, mouseenter/mouseleave помогли, в сочетании с TimeOut, перейти от menuNode к menuSelect (300 миллисекунд на входе, 500 на выходе).