0

我在我的网站上有一个水平菜单，在 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 的孩子上的任何悬停或鼠标悬停来设置第一个作为孩子的标签的背景。更好的是，将是一个只使用 css 而没有 JavaScript 的解决方案。

4

1 回答 1

1

您需要将子级包裹在父级内，然后 .hover 仅在父级上。由于孩子在父母内部，所以当您将孩子悬停时，您仍然悬停在父母身上。看到这个例子 http://www.bunchacode.com/programming/shadow-menu/

于 2009-08-19T18:53:32.013 回答