Question

I have a table and I create rows on the fly with:

$('#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);

I want to change background color on rows when I hover over them and change back when I’m not.

I tried with

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

but that didn’t work so I tried with

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

which changes the background-color when I hover over a row but it doesn’t change back to white when I’m not.

Any suggestions?

Thanks in advance.

Answer 1

I’d make a simple event handler that toggles a class.

JS

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

CSS

.hover {
  background-color: #F5F5F5;
}

EDIT: Also in your example, the property should be called backgroundColor (instead of background-color)

EDIT 2: .live() has a few caveats, one of which is binding with .hover(). See the API doc 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).

Hope this helps!