Сбой Jquery (почему у меня не работает событие hover)?

Question

Я хочу создать супер простой набор обработчиков для ярлыка hover (), но я продолжаю терпеть неудачу.В конечном итоге я просто выбрал mouseenter / mouseleave, но я хочу увидеть, в чем заключается моя проблема в будущем.Кроме того, я действительно новичок в JS и JQuery, поэтому, пожалуйста, держись со мной.

$function(){
     $('div.profile').find('li:gt(0)').each(function(){
           this.hover(highlight,offlight);
});
});

var highlight=function(){
   $(this).css("background","blue");
}

var offlight=function(){
   $(this).css("background","none");
}

Хорошо, так что это, вероятно, пронизано ошибками.Во-первых, я не уверен, работает ли контекст функции this во вторых определениях двух функций, поскольку это не определено вне готового обработчика.Если это не сработает, могу ли я сделать что-нибудь еще здесь, чтобы убедиться, что выделенное "li" - это то же самое, что и над ним?Стоит ли просто выделять и отключать анонимные функции или есть другой способ?

2) Кажется, что мой обработчик события зависания не работает, независимо от того, что я делаю.Я думаю, что я использую каждую функцию здесь правильно.Я не знаю, что дает.

Answer 1

Вы звоните .hover() на элемент DOM. Вместо этого вызовите его для объекта jQuery.

//-----v------was missing the "("
      $(function() {
           $('div.profile').find('li:gt(0)').hover(highlight,offlight);
      });
// attach .hover() to all the <li> found-------^

Как видите, в .each().

нет необходимости.

---

В целом, я бы использовал псевдоселектор CSS :hover, если все, что вы делаете - это просто изменение фона:

  $(function() {
       $('div.profile').find('li:gt(0)').addClass( "hoverMe" );
  });

CSS

li.hoverMe {
    background:none;
}
li.hoverMe:hover {
    background:blue;
}

Не будет работать в IE6 без некоторых настроек вашей разметки.

Answer 2

В вашей функции each, this не ссылается на объект jQuery.Вам нужно обернуть его в $():

$(this).hover(highlight,offlight);