Jquery 侧菜单悬停显示

我有一个隐藏在屏幕外的简单侧菜单，我想在它悬停在特定区域时显示它。它工作得很好，但是如果鼠标在菜单上移动，它会认为它不在该区域，然后返回。一旦发生这种情况，它将与我想要的交互相反：

鼠标悬停在这里
地铁
列表
网格

CSS:

。侧菜单{
背景色：#333；
边框：1px实心#444；
颜色：#fff；
显示：块；
字体大小：15px；
字号：700；
左：-96px；
填充：15px；
文字装饰：无；
排名：0；
身高：100%；
位置：固定；
z指数：5；
光标：指针；
}

JS:

$（“.menu hover”）.hover(
函数（）{
var$lefty=$（“.side菜单”）；
$lefty.animate({
左：parseInt（$lefty.css（'left'））<-95？
$lefty.css（'left'）==0:
-96
});
});

工作代码如下所示

    $(".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
        })
    }
})

$（“.menu hover”）。打开({
“鼠标指针”：函数（e）{
e、 停止传播（）；
var$lefty=$（“.side菜单”）；
$lefty.animate({
左：parseInt（$lefty.css（'left'））<-95？
$lefty.css（'left'）==0:
-96})
}
});
$（'.menu hover'）。打开({
“mouseleave”：函数（）{
var$lefty=$（“.side菜单”）；
$lefty.animate({
左：-96
})
}
})

JSFIDLE上的示例：

尝试以下方法：

工作演示

---

当鼠标离开“悬停区域”时，菜单并不总是返回，正如您在此处看到的：似乎我第一次就非常理解您的问题。我编辑答案和JSFIDLE。小心点：我在某处更改了你的html代码。我希望这个解决方案能对您有所帮助。所以当鼠标进入该区域时，菜单应该滑出，然后滑回，然后鼠标离开该区域。这段代码似乎有这样的功能interaction@Xtian：更新了我的答案。如果不符合预期，请检查并告知我。

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

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