懸停時的側面菜單顯示

Question

我有一個隱藏在屏幕外的簡單側面菜單，我想在特定區域中懸停時顯示它。它運行良好，但是如果鼠標移過菜單，它認爲它已經離開該區域並返回。然後，它會做的相互作用相反，我想一旦發生這種情況：

<div class="menu-hover"> 
    Hover Mouse Here 
</div> 
<div class="side-menu"> 
    <div class="btn-group btn-group-vertical"> 
    <button id="metro" class="btn">Metro</button> 
    <button id="list" class="btn">List</button> 
    <button id="grid" class="btn">Grid</button> 
    </div> 
</div> 

CSS：

.side-menu { 
    background-color: #333; 
    border: 1px solid #444; 
    color: #fff; 
    display: block; 
    font-size: 15px; 
    font-weight: 700; 
    left: -96px; 
    padding: 15px; 
    text-decoration: none; 
    top: 0; 
    height: 100%; 
    position: fixed; 
    z-index: 5; 
    cursor: pointer; 
} 

JS：

$(".menu-hover").hover(
    function() { 
    var $lefty = $(".side-menu"); 
    $lefty.animate({ 
     left: parseInt($lefty.css('left')) < -95 ? 
     $lefty.css('left') == 0 : 
     -96 
    }); 
    }); 

Answer 1

工作的代碼如下所示

$(".menu-hover").on({ 
    'mouseenter': function (e) { 
     e.stopPropagation(); 
        var $lefty = $(".side-menu"); 
        $lefty.animate({ 
        left: parseInt($lefty.css('left')) < -95 ? 
        $lefty.css('left') == 0 : 
         -96}) 
        } 
}); 
$('.menu-hover').on({ 
    'mouseleave': function(){ 
     var $lefty = $(".side-menu"); 
      $lefty.animate({ 
      left: -96 
     }) 
    } 
}) 

jsfidd示例樂：http://jsfiddle.net/glenswift/7UQDM/1/

Answer 2

試試這個：

工作演示here

$(".menu-hover, .side-menu").mouseenter(function(){ 
    $(".side-menu").animate({ 
     left: 0 
    }) 
}); 

$('.side-menu').mouseleave(function(){ 
    $(this).animate({ 
     left: -96 
    }) 
});