проблемы с наведением курсора jQuery для лучшего вида меню css - PullRequest
Новая
       15

проблемы с наведением курсора jQuery для лучшего вида меню css

0 голосов
/ 19 августа 2009

У меня есть горизонтальное меню на моем сайте с использованием nice-меню в drupal. Когда вы наводите курсор мыши на элемент 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 не появляется.

меню выглядит следующим образом (ознакомьтесь с демонстрацией 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>

Вот фактический 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.

1 Ответ

1 голос
/ 19 августа 2009

вам нужно обернуть дочерние элементы внутри родительского элемента, а затем. Только на родительском элементе. так как children находится внутри родителя, поэтому, когда вы наводите указатель мыши на детей, вы все еще зависаете над родителем. увидеть этот пример http://www.bunchacode.com/programming/shadow-menu/

...