JQuery парящий эффект

Question

Я новичок в jQuery и пытаюсь выяснить, как использовать эффект .hover(); вместо эффектов .mouseover() и .mouseout().Вот сценарий:

Я использую таблицу и хочу выделить строку с помощью класса CSS, который меняет цвет фона на светло-желтый.Вот CSS:

.bgHvr {
  background-color: #FFFACD;
}

Единственный способ, которым я знаю, как добавить желаемый эффект при наведении:

jQuery(document).ready(function($) {
  $('#table tbody tr').mouseover(function() {
    $(this).addClass('bgHvr');
  });
  $('#table tbody tr').mouseout(function() {
    $(this).removeClass('bgHvr');
  });
});

ОБНОВЛЕНИЕ:

После некоторой дополнительной помощиЯ нашел более простой способ эффекта наведения:

$('#table tbody tr').hover(function() { 
  $(this).toggleClass('bgHvr');
});

Это стало возможным после обновления 1.4Q в jQuery, которое изменило работу эффекта .toggle().

Answer 1

Hover в основном объединяет 2 события в одно.

.hover(mouseover,mouseout) 

или в вашем случае:

jQuery(document).ready(function($) {
  $('#table tbody tr').hover(function() {
    $(this).addClass('bgHvr');
  },function() {
    $(this).removeClass('bgHvr');
  });
});

Answer 2

Хм ... Как насчет использования CSS?

#table tbody tr:hover {
    background-colour: #FFFACD;
}

РЕДАКТИРОВАТЬ: С ДЕМО

Answer 3

Лучший способ, которым я знаю, как и полностью совместим со всеми браузерами.

В неупорядоченном списке -

JS

$('ul').delegate('li', 'mouseenter mouseleave', function() {
  $(this).toggleClass('hover');
});

CSS

li.hover {
  background-color: #CCC;
}

Answer 4

$('#table tbody tr').hover(
    function() {
        $(this).addClass('bgHvr');
    }, function() {
        $(this).removeClass('bgHvr');
    }
);