problèmes avec jQuery mouseover pour un meilleur menu css

Question

J'ai un menu horizontal sur mon site en utilisant nice-menus dans drupal. Lorsque vous passez la souris sur un élément li, une image d'arrière-plan est définie pour le lien qui s'affiche. Le problème que j'ai est que cette image disparaît lorsque vous passez la souris sur les enfants d'un élément de menu parent. L'image qui disparaît est définie en utilisant ce style 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; 
    } 

J'ai mis en place jsbin pour tester ceci: http://jsbin.com/ogegu

Il semble que cela fonctionne comme prévu. Le menu se développe, et seul l'élément parent semble être modifié lorsque l'enfant ul. Toutefois, lorsque j'utilise du code qui tente réellement de définir l'image d'arrière-plan, le png n'apparaît pas.

le menu ressemble à ceci (consultez la démo jsbin à 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> 

Voici le JavaScript réel que je suis en train d'utiliser:

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; 
    }); 
}); 

Je suis assez nouveau pour En utilisant jQuery, quelqu'un peut-il proposer une suggestion pour expliquer pourquoi cela ne fonctionne pas comme prévu? Idéalement, je voudrais que n'importe quel hover ou mouseover sur les enfants de menuparent ou menuparent pour définir l'arrière-plan de la première une étiquette qui est un enfant. Encore mieux, serait une solution qui utilise seulement css et pas de JavaScript.

Answer 1

Vous devez envelopper les enfants dans le parent et ensuite .hover sur le parent uniquement. puisque les enfants sont à l'intérieur du parent, donc quand vous planez les enfants, vous êtes toujours en train de planer le parent. voir cet exemple http://www.bunchacode.com/programming/shadow-menu/