Javascript 如何显示/隐藏新的<;部门>;近<;部门>;通过鼠标移动/鼠标移动?

Javascript 如何显示/隐藏新的<;部门>;近<;部门>;通过鼠标移动/鼠标移动?,javascript,jquery,css,opera,Javascript,Jquery,Css,Opera,我有一个容器(主容器),当鼠标移到它上面时,会在主容器附近显示新容器(添加容器)。当鼠标移到此容器(主容器和添加容器)上时,添加容器保持在屏幕上。当鼠标移出主容器或添加容器时,添加容器隐藏。问题:此外,opera容器未停留在屏幕上 HTML: 我添加了一个容器div,将mouseover和mouseout事件绑定到这两个元素。是否要使用此类型?“---添加内容----”鼠标悬停在主要内容或添加内容上时必须在屏幕上。它在opera中仍然不起作用/当我尝试添加块显示链接和角色鼠标悬停时,块隐藏良好

我有一个容器(主容器),当鼠标移到它上面时,会在主容器附近显示新容器(添加容器)。当鼠标移到此容器(主容器和添加容器)上时,添加容器保持在屏幕上。当鼠标移出主容器或添加容器时,添加容器隐藏。问题:此外,opera容器未停留在屏幕上

HTML:


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

是否要使用此类型?“---添加内容----”鼠标悬停在主要内容或添加内容上时必须在屏幕上。它在opera中仍然不起作用/当我尝试添加块显示链接和角色鼠标悬停时,块隐藏良好,它在我这边起作用(Mac上的opera 15)。他们最近转向了webkit,也许你有一个更老的版本,有他们自己的引擎。您使用的是哪个版本?Opera/9.80(Windows NT 5.1)Presto/2.12.388版本/12.16
<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>
$('.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 });
});