Question

我有一张桌子，我随时创建行：

$('#AjaxResultTable > tbody:last').append('<tr class="row"><td class="expandResult" title="Click to expand/collapse">&#43;</td>' + id + name + suburb + state + zip + '</tr>').hide().fadeIn(200);

当我将鼠标悬停在行上时，我希望更改行上的背景颜色，当我不在时，我会更改回来。

我试过

$('#AjaxResultTable tr').hover(function () {
    $(this).css('background-color', '#f5f5f5');
}, function () {
    $(this).css('background-color', '#fff');
});

但是没有用，所以我尝试了

$('#AjaxResultTable tr').live('hover', function () {
    $(this).css('background-color', '#f5f5f5');
}, function () {
    $(this).css('background-color', '#fff');
});

当我将鼠标悬停在一行上时会改变背景颜色，但是当我不在时，它不会变回白色。

有什么建议吗？

提前致谢。

Answer 1

我会创建一个简单的事件处理程序来切换类。

JS

$('#AjaxResultTable').delegate('tr', 'mouseenter mouseleave', function() {
    $(this).toggleClass('hover');
});

CSS

.hover {
  background-color: #F5F5F5;
}

编辑：同样在您的示例中，应该将该属性称为backgroundColor（而不是background-color）

编辑2： .live（）有一些警告，其中一个与.hover（）绑定。请参阅API文档here。

As of jQuery 1.4.1 the hover event can be specified (mapping to mouseenter and mouseleave, which, in turn, are mapped to mouseover and mouseout).

希望这有帮助！

Answer 2

我建议严格使用css。如果你的页面上有很多东西，尤其是现场处理程序，你会发现性能下降。

这样的css选择器：将改变悬停行中所有td的背景颜色。

#YourTableId tbody tr:hover td
{
    background-color:#F0F6Fc; 
}

Answer 3

是的，我也会在Css中更改演示文稿样式。有些东西生活在什么地方。

#yourTableID tbody td:hover tr
{
   backgroundColor:#F0F6Fc;
    color: #FFF;
}

or .yourTableClass tr:hover
{
   backgroundColor:#F0F6Fc;
    color: #FFF;
}

我也认为它在这里，但如果你使用IE浏览器... 7 - 无论我推荐使用什么 whatever:hover档案

Answer 4

你可以使用.mouseleave()听众..看看这里：http://api.jquery.com/mouseleave/

Answer 5

您需要将背景颜色应用于td / th而不是tr。在这种情况下，基于类的系统更可取

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

tr.hover td, tr.hover th { background-color: #f5f5f5; }

jquery悬停在表行与.live帮助

5 个答案: