问题与jQuery mouseover更好看css菜单 [英] problems with jQuery mouseover for better looking css menu

问题描述

我在drupal使用漂亮的菜单在我的网站上有一个水平菜单。当您将鼠标悬停在li元素上时，会为显示的链接设置背景图片。我遇到的问题是，当您将鼠标悬停在父菜单项的子项上时，此图片会消失。使用此CSS样式设置消失的图像：

I have a horizontal menu on my site using nice-menus in drupal. When you hover over an li element, a background image is set for the link that displays. The problem I'm having is that this image disappears when you hover over a parent menu item's children. The image that is disappearing is set using this css style:

  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。

It looks like it works as expected. The menu expands, and only the parent element seems to be altered when over the child ul. However when I use code that actually attempts to set the background image, the png does not appear.

菜单看起来像这样（查看jsbin演示 http://jsbin.com/ogegu ）：

the menu looks like this (check out the jsbin demo at http://jsbin.com/ogegu ):

<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：

Here is the actual JavaScript that I am trying to use:

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的孩子的任何悬停或mouseover设置的第一个标签的背景是一个孩子。更好的是，只使用css而不使用JavaScript的解决方案。

I am fairly new to using jQuery, can anyone offer a suggestion as to why this isn't doing what I'd expect? Ideally, I would like any hover or mouseover on the menuparent or menuparent's children to set the background of the first a tag that is a child. Even better, would be a solution that uses only css and no JavaScript.

推荐答案

然后在父母上.hover。
，因为孩子是在父母内部，所以当你悬停孩子，你仍然悬停父母。
查看此示例
http://www.bunchacode.com/ programming / shadow-menu /

you need to wrap the children inside the parent and then .hover on the parent only. since children is inside the parent, so when you hover the children, you are still hovering the parent. see this example http://www.bunchacode.com/programming/shadow-menu/

这篇关于问题与jQuery mouseover更好看css菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！