jquery - jQuery中的显示/隐藏菜单问题

Question

我在使用 jQuery 显示/隐藏菜单时遇到了一个奇怪的行为。

我有一个绝对定位的 div，其中包含一个“激活器”div(相对定位)，我想在 moseover 上显示一个菜单。菜单div包含在activator div中，也是相对定位的。我正在假设，因为它会被激活器包含，所以当鼠标移动到显示的菜单时不会触发滚降。但是，当您滚动到显示的菜单时，即使在鼠标清除该区域后，显示/隐藏也会开始闪烁并持续一秒左右。

CSS 看起来像这样

#myAbsolutePos {
 position:absolute;
 height:335px;
 width:213px;
 top:508px;
 left:0;
 z-index:2;
}

#activator {
 position:relative;
 height:35px;
 margin-top:95px;
 text-align:center;
 width:inherit;
 cursor:pointer;
}

#menu {
 position:relative;
 height:255px;
 width:243px;
 top:-45px;
 left:190px;
 padding:20px 25px 20px 25px;
}

#menuContents {
 width:190px;
}

jQuery 函数:

  $('#activator').mouseover(function () {
    $('#menu').show('slow');     
  });

  $('#activator').mouseout(function () {
    $('#menu').hide('slow'); 
  });

HTML:

<div id="myAbsolutePos">
<div id="activator">
  // content

  <div id="menu" style="display:none">
    <div id="menuContents">
    // content
    </div>
  </div>
</div>
</div>

要查看实际问题，请滚动到左下角的当前天气位置(Thunder Horse):http://www.karlsenner.dreamhosters.com/index.php

非常感谢任何建议!

Answer 1

你能试试吗:

$('#activator').hover(function () {
    $('#menu').show('slow');     
}, function () {
    $('#menu').hide('slow'); 
});