尝试创建一个快速的 jQuery 下拉菜单
我不确定我这样做是否正确，但我正在尝试用 jQuery 创建一个简单的下拉菜单。 我基本上希望在菜单项悬停在上方时出现一个 div（带有链接）。
菜单：
<ul id="mainlevel">
<li><a href="#" class="mainlevel_home" ><span>Home</span></a></li>
<li><a href="#" class="mainlevel_feature-writers" ><span>Feature Writers</span></a></li>
<li><a href="#" class="mainlevel_fantasy-killed-my-hsc" ><span>Fantasy Killed My HSC</span></a></li>
</ul>
隐藏 Div：
<div class="subMenu"><a href="/feature-writers/jd-ormsby" class="sublevel jd-ormsby"><span>J.D. Ormsby</span></a></div>
jQuery：
$(".mainlevel_feature-writers").hover(function(){
$(".subMenu").fadeIn("slow");
}, function() {
$(".subMenu").fadeOut("slow");
});
现在，这会在隐藏的 div 中淡出并淡出，但是 - 如果有人将鼠标悬停在新显示的 div 内的某些内容上，如何阻止它淡出？
抱歉，如果这是一个非常明显的问题..我仍在学习！ :)
am not sure if I'm doing this right, but I'm trying to create a simple drop down menu in jQuery. I basically want a div (with links) to appear once the menu item is hovered over..
The Menu:
<ul id="mainlevel">
<li><a href="#" class="mainlevel_home" ><span>Home</span></a></li>
<li><a href="#" class="mainlevel_feature-writers" ><span>Feature Writers</span></a></li>
<li><a href="#" class="mainlevel_fantasy-killed-my-hsc" ><span>Fantasy Killed My HSC</span></a></li>
</ul>
The Hidden Div:
<div class="subMenu"><a href="/feature-writers/jd-ormsby" class="sublevel jd-ormsby"><span>J.D. Ormsby</span></a></div>
The jQuery:
$(".mainlevel_feature-writers").hover(function(){
$(".subMenu").fadeIn("slow");
}, function() {
$(".subMenu").fadeOut("slow");
});
Now, this fades in the hidden div and fades it out fine, but - how do I stop it from fading out if someone hovers on something inside the newly shown div?
Sorry if this is a really obvious question.. I am still learning! :)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我认为您需要分开处理
mouseover和mouseout事件。据推测，您希望将
mouseover处理程序附加到“顶级”菜单元素，并将mouseout处理程序附加到隐藏的“下拉”div（有一些管理冲突的状态代码）。I think you need to separate the handling of
mouseoverandmouseoutevents.Presumably, you want the
mouseoverhandler to be attached to the "top level" menu element, and themouseouthandler to be attached to the hidden "dropdown" div (with some state code to manage conflicts).