jquery - jQuery悬停效果

Question

我是 jQuery 新手，并试图弄清楚如何使用.hover();效果来代替.mouseover()and.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');
});

在 jQuery 的 1.4.2 更新改变了.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');
    }
);