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

关于jsfiddle的示例：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
    })
});

侧面菜单显示悬停

2 个答案: