javascript - How to show/hide new near by mouseover/mouseout?

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/

我添加了一个容器div来将 mouseover 和 mouseout 事件绑定到这两个元素。