问题与jQuery鼠标悬停更好看的CSS菜单

我有一个在我的网站上使用漂亮的菜单在Drupal水平菜单。将鼠标悬停在li元素上时，会为显示的链接设置背景图像。我遇到的问题是，当您将鼠标悬停在父菜单项的子项上时，此图像会消失。正在消失的是使用这个CSS样式设置图像：问题与jQuery鼠标悬停更好看的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的子项上的任何悬停或鼠标悬停设置第一个子标记的背景。更好的是，这个解决方案只使用css而不使用JavaScript。

来源

2009-08-19 Arosboro

您需要将子项封装在父级中，然后仅在父级上进行.hover。因为孩子在父母的内部，所以当你悬停孩子时，你仍然徘徊父母。看到这个例子 http://www.bunchacode.com/programming/shadow-menu/

来源

2009-08-19 18:53:32

谢谢，时髦的家伙，阴影菜单是一个很好的例子。我意识到我的问题中的代码遵循了您的建议，但图像未加载，因为绝对路径已关闭。我解决了这个问题，一切都很好。 – Arosboro 2009-08-20 03:12:22

问题与jQuery鼠标悬停更好看的CSS菜单

回答

相关问题