悬停时的侧面菜单显示
问题描述:
我有一个隐藏在屏幕外的简单侧面菜单,我想在特定区域中悬停时显示它。它运行良好,但是如果鼠标移过菜单,它认为它已经离开该区域并返回。然后,它会做的相互作用相反,我想一旦发生这种情况:悬停时的侧面菜单显示
<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
});
});
答
工作的代码如下所示
$(".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/
答
试试这个:
工作演示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
菜单并不总是回去当鼠标离开了“悬停区”,你可以在这里看到:HTTP:// jsfiddle.net/xtian/rsd8L/ – Xtian 2013-03-22 14:49:37
看来,我第一次了解你的问题很糟糕。我编辑答案和jsfiddle。小心:我在某处更改了你的html代码。我希望这个解决方案能帮助你。 – 2013-03-22 16:33:15