JQuery раскрывающееся меню состояние при наведении - PullRequest
Новая
       13

JQuery раскрывающееся меню состояние при наведении

0 голосов
/ 14 декабря 2010

Моя проблема:

У меня есть раскрывающееся меню, и я хочу, чтобы при наведении на него меню менял цвет текста, а при наведении на подменю состояние наведения оставалось для обоих. Я использую этот код: 

$("ul li").hover(function () {

    $(this).stop().animate({ backgroundColor: "white"}, 500);

},
function () {

    $(this).stop().animate({ backgroundColor: "black"}, 400);

});

}

для анимации цвета фона при наведении в меню и подменю.

Я хочу изменить цвет текста при наведении курсора (отличается для меню и подменю, а не для одной и той же цветовой анимации). Для этого я использую этот код: (Пример подменю, например, меню, измените селектор на $ ('ul.menu li a') 

$('ul.submenu li a').hover(function () {

$(this).css({color:'#FFFFFF'});

},
function () {

$(this).css({color:'#00FF00'});

});

Все. Это работает нормально, но когда я наведите курсор на подменю, меню вернется к исходному цветному состоянию (потому что отпускание мыши активируется при наведении меню).

Все, что я хочу, это чтобы при наведении на подменю состояние наведения в меню оставалось активным.

Я пробовал много вещей, но все они доставляют мне проблемы, единственное, что работает, это css, но мне нужно динамически контролировать цвета текста.

CSS, который работает: 

ul li:hover a {
    color: #FFF;
}

(с помощью этого кода CSS я управляю цветом меню с помощью css, и когда я открывал подменю, меню остается в активном состоянии, но подменю работает с jquery .hover).

Может кто-нибудь помочь? Спасибо!

HTML Меню: 

<ul class="menu">

      <li><a href="#">text</a></li>

      <li><a href="#">text</a>

        <ul class="submenu">
          <li><a href="#">text</a></li>
          <li><a href="#">text</a></li>
          <li><a href="#">text</a></li>
        </ul>

      </li>

      <li><a href="#">text</a>

</ul>

1 Ответ

0 голосов
/ 14 декабря 2010

Если вы хотите, чтобы при наведении указывался текущий цвет, пока вы не наведете другой цвет, используйте классы.

css: 

ul.submenu li a { color: #0f0; }
ul.submenu li a.hovered { color: #fff; }

js: 

$('ul.submenu li a').mouseover( function() {
   if (!$(this).hasClass('hovered')) {
      $('ul.submenu li a.hovered').removeClass('hovered');
      $(this).setClass('hovered');
   }
});

Надеюсь, я вас правильно понял.Удачи в вашем проекте.

[править]

О, хм, может быть, вы захотите, чтобы, когда вы уходите в подменю, ваш родительский ли не потерял свой цвет, несмотря на то, что вы помышляетеиз.Если это так, применима та же идея, вы просто хотите, чтобы этот код при наведении курсора мыши выбирал при наведении курсора на пункт меню (так что при наведении курсора на меню отменяются все другие меню и устанавливается этот), тогда вам просто необходимо удалить его.Цвет класса меню, если вы выходите из его подменю ul.Я не знаю, как выглядят ваши меню по структуре, поэтому я не могу комментировать рабочий CSS для этого селектора.

О, и, наконец, вы хотите иметь правило css против наведения подменюдля обработки выделения в подменю.

Извините за бессвязный ответ ...

...