Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add background color and border to table row on hover using jquery

Tags:

jquery

css

Does anyone know of a way to add a border to a table row with a different background color when the mouse hovers over the row?

I've been able to change the background color of the row with this:

$(document).ready(function() {
   $(function() {
        $('.actionRow').hover(function() {
            $(this).css('background-color', '#FFFF99');
        },
        function() {
            $(this).css('background-color', '#FFFFFF');
        });
    });
});

But I'm unable to add a border color. I realize borders can't be directly applied to a table row tag, but I'm hoping someone know some jQuery voodoo magic that can find the table cells within the selected row and apply some styles to those to create the border.

Thanks!

like image 396
Chris Conway Avatar asked Mar 27 '09 01:03

Chris Conway


1 Answers

   $(function() {
        $('tr').hover(function() {
            $(this).css('background-color', '#FFFF99');
            $(this).contents('td').css({'border': '1px solid red', 'border-left': 'none', 'border-right': 'none'});
            $(this).contents('td:first').css('border-left', '1px solid red');
            $(this).contents('td:last').css('border-right', '1px solid red');
        },
        function() {
            $(this).css('background-color', '#FFFFFF');
            $(this).contents('td').css('border', 'none');
        });
    });
like image 63
tom Avatar answered Sep 20 '22 02:09

tom