2013-03-22 119 views
0

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

<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 
    }); 
    }); 

回答

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/

+0

菜單並不總是回去當鼠標離開了「懸停區」,你可以在這裏看到:HTTP:// jsfiddle.net/xtian/rsd8L/ – Xtian 2013-03-22 14:49:37

+0

看來,我第一次瞭解你的問題很糟糕。我編輯答案和jsfiddle。小心:我在某處更改了你的html代碼。我希望這個解決方案能幫助你。 – 2013-03-22 16:33:15

0

試試這個:

工作演示here

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

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

因此,當鼠標移動到該區域時,菜單應該滑出,然後再滑入,然後鼠標離開該區域。此代碼似乎確實有這種互動 – Xtian 2013-03-22 15:10:07

+0

@ Xtian:更新了我的答案。檢查並告訴我是否不符合預期。 – 2013-03-22 20:16:22