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.4.2更新jQuery之后，这可能会改变.toggle()效果的工作方式。

Answer 1

悬停基本上将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;
}

编辑：使用 DEMO

Answer 3

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

Answer 4

最好的方式我知道如何与所有浏览器完全兼容。

在无序列表中 -

<强> JS

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

<强> CSS

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

jQuery悬停效果

4 个答案: