如何显示/隐藏新内容 <div> 近 <div> 通过鼠标悬停/鼠标悬停？

Question

I have a container (main container), when mouse over on it - shows new container (addition container) near main container. While mouse over this containers (main container and addition container) addition container stay on screen. When mouse out main container or addition container - addition container hides. Problem: in opera addition container do not stay on screen.

HTML:

<div style='float:left; width:100px;' class='triggerShowHidePanel' panelID='1'>    
--- main content ---    
<div class='categoryContainer1' style='float:left; display:none; width:100px;'>
--- addition content ---    
</div>
</div>

JS:

$('.triggerShowHidePanel').bind('mouseover', function() {
    var positionX = $(this).position().top;
    var positionY = $(this).position().left + 100;
    $('.categoryContainer' + $(this).attr('panelID')).show();
    $('.categoryContainer' + $(this).attr('panelID')).offset({ 
        top: Math.round(positionX), 
        left: Math.round(positionY)
    });     
}).bind('mouseout', function() {
    $('.categoryContainer' + $(this).attr('panelID')).hide();
    $('.categoryContainer' + $(this).attr('panelID')).offset({ top: 0, left: 0 });
});

Answer 1

http://jsfiddle.net/gUap5/5/

I added a container div to bind the mouseover and mouseout events to both elements.