javascript - 如何通过 mouseover/mouseout 在 附近显示/隐藏新的 ？

Question

我有一个容器(主容器)，当鼠标悬停在它上面时 - 在主容器附近显示新容器(附加容器)。当鼠标悬停在这个容器(主容器和附加容器)上时，附加容器停留在屏幕上。当鼠标移出主容器或添加容器时 - 添加容器隐藏。问题:在 Opera 中，添加容器不会停留在屏幕上。

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 事件绑定(bind)到这两个元素。