我的网站上有一个水平菜单,使用 drupal 中的 nice-menus。当您将鼠标悬停在 li 元素上时,会为显示的链接设置背景图像。我遇到的问题是,当您将鼠标悬停在父菜单项的子项上时,此图像会消失。正在消失的图像是使用此 css 样式设置的:
ul.nice-menu li a:hover, ul.nice-menu li.active a {
background: url(images/bg-li-active.png) no-repeat scroll left bottom;
}
ul.nice-menu li * a:hover, ul.nice-menu li.active * a {
background: none repeat;
color:#000000;
}
我已经设置了 jsbin 来测试这个:http://jsbin.com/ogegu
它看起来像预期的那样工作。菜单展开,在子 ul 上时似乎只有父元素发生了变化。但是,当我使用实际尝试设置背景图像的代码时,不会出现 png。
菜单看起来像这样(查看 http://jsbin.com/ogegu 的 jsbin 演示):
<div class="content">
<ul class="nice-menu nice-menu-down" id="nice-menu-1"><li id="menu-240" class="menu-path-front"><a href="/" title="" class="active">Home</a></li>
<li id="menu-660" class="menu-path-node-20"><a href="/content/about-us" title="About Us">About Us</a></li>
<li id="menu-238" class="menuparent menu-path-node-3">
<a href="/services" title="">Services</a>
<ul>
<li id="menu-988" class="menu-path-node-29"><a href="/content/business-advisory" title="Business Advisory">Business Advisory</a></li>
<li id="menu-244" class="menu-path-node-10"><a href="/content/network-design" title="Network Design">Network Design</a></li>
</ul>
</li>
<li id="menu-239" class="menu-path-node-2"><a href="/content/clients" title="">Clients</a></li>
<li id="menu-327" class="menu-path-partners"><a href="/partners" title="">Partners</a></li>
<li id="menu-631" class="menu-path-principals"><a href="/principals">Principals</a></li>
</ul>
</div>
这是我尝试使用的实际 JavaScript:
jQuery(document).ready(function(){
jQuery('#nice-menu-1 li ul').hide();
jQuery('#nice-menu-1 li.menuparent').hover(function() {
jQuery(this).children('ul').show('fast');
jQuery(this).children('a:eq(0)').css({ "background": "url(images/bg-li-active.png) no-repeat scroll left bottom"});
return false;
},
function() {
jQuery(this).children('ul').hide('fast');
jQuery(this).children('a:eq(0)').css({"background": "none"});
return false;
});
});
我对使用 jQuery 还很陌生,任何人都可以就为什么这没有达到我的预期提出建议吗?理想情况下,我希望在 menuparent 或 menuparent 的 child 上进行任何悬停或鼠标悬停,以设置第一个子标签的背景。更好的是,将是一个仅使用 css 而不使用 JavaScript 的解决方案。
最佳答案
您需要将子项包裹在父项中,然后仅将鼠标悬停在父项上。 因为 child 在 parent 里面,所以当你悬停 child 时,你仍然悬停在 parent 身上。 看这个例子 http://www.bunchacode.com/programming/shadow-menu/
关于jquery - jQuery 鼠标悬停问题以获得更好看的 css 菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1301777/