CODEWITHSUNDEEP
jquerycss
Chris Conway
Chris Conway

Reputation: 16519

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

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!

Upvotes: 13

Views: 62173

Answers (4)

Vipin Kumar R. Jaiswar
Vipin Kumar R. Jaiswar

Reputation: 741

$('table.tblMenuTabls tr').hover(function(){
        $(this).toggleClass('tblOverRow');
        },function(){
            $(this).toggleClass('tblOverRow')}
    ).css({cursor: 'hand'});

Where tblMenuTabls is the table class name and tblOverRow is CSS class with hover definition.

Upvotes: 1

tom
tom

Reputation: 2077

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

Upvotes: 31

Mister Lucky
Mister Lucky

Reputation: 4073

Your best bet would be to addClass and removeClass on the row. Then in your stylesheet:

.actionRow-hovered td { border-color: whatever; }

So you will actually be manipulating each of the td border colors instead. A pain, but works well enough when you get the hang of it.

Upvotes: 4

boj
boj

Reputation: 11395

Maybe it's a good starting point:

http://www.devcurry.com/2009/02/change-table-border-color-on-hover_27.html

Upvotes: 0

Related Questions