在导航栏中,单击“Home 3”菜单时,会通过 jQuery 显示一个下拉菜单。当我将鼠标悬停在我已包含样式的菜单的其他链接上时,我想隐藏此菜单:
.nav-ul .menu-item:hover ul{
display:none;
}
这是 fiddle : http://jsfiddle.net/Tw44R/1/
最佳答案
选择器 .nav-ul .menu-item:hover ul
只会针对 <ul>
在.menu-item
里面悬停的元素。
你不能向上遍历 DOM
目前正在使用 CSS。
添加以下脚本:
$('.menu-item').hover(function(){
$(this).siblings().find('ul').hide();
});
更新:
如果想在鼠标移开时隐藏下拉框,可以使用hover的第二个回调,如下:
$('.menu-item').hover(function () {
$(this).siblings().find('ul').hide();
},
function () {
$(this).find('ul').hide()
});
旁注:对于看到 Yury Tarabanko 的任何反对票的人的评论,是not a reliable solution用于手头的任务(如果子菜单位于悬停项之前则不起作用)。
关于jquery - 悬停时隐藏CSS下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24758517/