我觉得这个问题之前一定有人问过，但我一定不知道正确的术语才能找到答案。
我有一个transparent作为命中区域的 div。当用户将鼠标悬停在该区域上时，菜单栏会在屏幕上显示动画。问题是如果光标移到这个菜单上，隐藏菜单的动画就会开始。它感觉不到光标在它上面。我可以通过使点击区域的 z-index 高于菜单来解决这个问题，但是菜单按钮是不可点击的。
这是我的代码。有任何想法吗？
CSS
#menu{
position:fixed;
top:-40px;
left:0px;
width:100%;
height:40px;
background-color:#000;
z-index:50;
}
#hitarea{
position:fixed;
top:0px;
left:0px;
width:100%;
height:150px;
background-color:#eee;
z-index:49;
opacity:0;
}
HTML
<div id="menu"></div>
<div id="hitarea"></div>
JAVASCRIPT
$("#hitarea").hover(
function () {
$('#menu').delay(500).animate({
top: 0
}, 500, function() {
// Animation complete.
});
},
function () {
$('#menu').delay(500).animate({
top: -40
}, 500, function() {
// Animation complete.
});
}
);