tags:

views:

5032

answers:

4

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!

A: 

Maybe it's a good starting point:

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

boj
That's for the whole table border, not the individual rows.
Mister Lucky
true, I said maybe it's a good starting point.
boj
+3  A: 

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.

Mister Lucky
+4  A: 
   $(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');
        });
    });
tom
perfect! thanks!
Chris Conway
It's a little squirrely in IE7. Figures.
Robert Harvey
A: 

hi all!!! what is contents() method & what do work??????

ahmad
If you want to ask a question use the "ask question" button, don't post it as an answer to a old question.
sth