jQuery event handling / propagation / bubbling?

Question

I'm trying to create a menu for a website, I'm using jQuery for this and I've run into a little problem.

I have this structure

<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>

And in jQuery, I have

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

When the user hovers over menuNode, the menuSelect should be shown (that, it does), but if I hover over menuAnchor, or the span, it fires the mouseout event, and then the mouseover event.

So, if say, I had the mouse over menuNode, and the move over to the span and then out to menuNode again, it would fire the mouseover event 3 times. I've had this behavior before on a click event, but it seems the method used to resolve this does not work on this problem.

Any suggestions?

Answer 1

As @Beetroot-Beetroot suggested, mouseenter/mouseleave helped, coupled with a TimeOut to change from the menuNode to the menuSelect (300 miliseconds on enter, 500 on leave).