изменение имени класса и .hover ()

Question

Так что у меня есть проблема, когда я загружаю документ, у меня есть класс с именем .active, который изменяется в зависимости от того, какой элемент списка вы просматриваете с помощью навигации по клавиатуре.Проблема в том, что когда этому элементу списка назначен активный класс, я бы хотел, чтобы этот элемент списка отображался только при наведении, чтобы отобразить другой фрагмент содержимого. Но проблема в том, что моя функция наведения работает только назагрузка страницы, и только при присоединении к тому элементу списка, которому при загрузке присвоен .active.

<ul>
<li class="active">Foo <a class="more-info" href="#">Click Me</a></li>
<li>Bar <a class="more-info" href="#">Click Me</a></li>
<li>Pie <a class="more-info" href="#">Click Me</a></li>
</ul>

Когда пользователь использует навигацию с помощью клавиатуры, предыдущий элемент списка больше не будет иметь .active, а следующийкласс будет назначен следующим образом:

<ul>
<li>Foo <a class="more-info" href="#">Click Me</a></li>
<li class="active">Bar <a class="more-info" href="#">Click Me</a></li>
<li>Pie <a class="more-info" href="#">Click Me</a></li>
</ul>

Я хотел бы, чтобы, когда пользователь наводит курсор мыши на новый элемент списка, ему предоставлялась информация a.more-info, но она не работала.Я снова верю, это потому что .hover ();запускается только один раз при загрузке страницы и не слушает все время ..

 $("li.active").hover(
    function () {
        $('li.active a.more-info').fadeIn();
    },
    function () {
        $('li.active a.more-info').fadeOut();
    });

Есть идеи?

Answer 1

(...) и присоединяется только к тому элементу списка, которому назначен .active при загрузке

Вы правы, обработчик прикреплен только к тем элементам li, которые имеют класс active. Но вы можете проверить, какой класс у них во время выполнения:

 $("li").hover( // attach the handler all li elements
    function () {
        if($(this).hasClass('active'))  // check for 'active' class
            $('a.more-info', this).fadeIn();
    },
    function () {
        if($(this).hasClass('active'))
            $('a.more-info', this).fadeOut();
 });

Предполагается, что все элементы списка присутствуют при загрузке страницы. В противном случае вы должны объединить его с live(). Обратите внимание: вам не нужно live(), если вы не загружаете списки через Ajax.

Я снова верю, это потому, что .hover (); запускается только один раз при загрузке страницы и не слушает все время ..

Это не правильно. Обработчик подключается только при загрузке страницы (так что да, ваш вызов функции выполняется только один раз). Но событие вызывается всегда, когда курсор мыши находится над элементом <li>. Затем вызывается обработчик.

Answer 2

$("li.active").live({
   mouseenter: function()  {
        $('li.active a.more-info').fadeIn();
   },
   mouseleave: function() {
        $('li.active a.more-info').fadeOut();
   }
});

http://api.jquery.com/live/

JQuery Live предназначен для решения вашей конкретной ситуации.