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

2 回答 2

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

关于 jsfiddle 的示例：http: //jsfiddle.net/glenswift/7UQDM/1/

于 2013-03-22T14:05:18.030 回答
0

尝试这个：

工作演示在这里

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

$('.side-menu').mouseleave(function(){
    $(this).animate({
        left: -96
    })
});
于 2013-03-22T14:59:06.763 回答