0

drupal の nice-menu を使用して、サイトに水平メニューがあります。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 に答える