Question

I’m working on creating a tabular report of some information on a website. This table is fairly wide so I’d like to add a 4px border to each row on hover using jQuery. Here is my script:

$(function() {
    $('tr').hover(function() {
        $(this).contents('td').css({'border-top':'4px solid #934739', 'border-bottom':'4px solid #934739'});
    },
    function() {
        $(this).contents('td').css({'border-top':'1px solid #000','border-bottom':'1px solid #000'});
    });
});

It works exactly as it should in Firefox. However, in Chrome it works fine for the first few rows but then it starts “leaving behind” some of the border color on previously hovered rows.

I’m on a Mac using Chrome 15.0.874.106. Here a jsFiddle as an example: http://jsfiddle.net/D6eKE/1/

Is there anything I can do to make this work better in Chrome? Thanks for your help!

Answer 1

It looks like you’re pretty close, so try adding the ID selector:

$(function(){
    $("#tableid tr").hover(
        function(){
            $(this).addClass("highlight");
        },
        function(){
            $(this).removeClass("highlight");
        }
    );
});

You could also use the columnHover plugin:

$(document).ready(function(){
    $("#tableid").columnHover({ hoverClass: "highlight" });
});

Lastly, you could also accomplish this with some simple CSS:

#tableid tr:hover {
  background-color: #f8f8f8;
}