Question

I want to convert this css behaviour into a jquery hover statement (because IE7/8 doesn’t support css3). Basically when hovering over a row, I want the whole row to be highlighted except for the last cell.

#mysearchtable tr:hover td:not(:last-child)
{
  background-color: #444444;
}

I’ve tried using this:

$("#mysearchtable tr td:not(:last-child)").hover(
 function () { $(this).addClass('hoverclass') }, 
 function () { $(this).removeClass('hoverclass') });

The problem with this is $(this) is only returning the actual cell that was hovered over. I can try and use $(this).parent() but that would give me the whole row. What I want is the highlight the whole row, except the last cell.

Would anyone know a solution?

Cheers.

Answer 1

Untested, but try:

$("#mysearchtable tr").hover(
    function () { $(this).find("td:not(:last-child)").addClass('hoverclass') }, 
    function () { $(this).find("td:not(:last-child)").removeClass('hoverclass') }
);