如何顯示/隱藏新內容 <div> 近 <div> 通過鼠標懸停/鼠標懸停？

Question

我有一個容器（主容器），當鼠標懸停在其上時-在主容器附近顯示了新容器（附加容器）。 當鼠標懸停在此容器（主容器和附加容器）上時，附加容器仍在屏幕上。 將鼠標移出主容器或附加容器時-隱藏附加容器。 問題：在歌劇添加容器中不要停留在屏幕上。

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事件綁定到這兩個元素。