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