Добавить цвет фона и границы для строки таблицы при наведении курсора с помощью jquery

Question

Кто-нибудь знает способ добавить границу к строке таблицы с другим цветом фона, когда мышь наводит курсор на строку?

Мне удалось изменить цвет фона строки следующим образом:

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

Но я не могу добавить цвет границы. Я понимаю, что границы нельзя напрямую применить к тегу строки таблицы, но я надеюсь, что кто-то знает магию jQuery voodoo, которая может найти ячейки таблицы в выбранной строке и применить некоторые стили к ним для создания границы.

Спасибо!

Answer 1

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

Answer 2

Лучше всего будет добавить класс и удалить класс в строке. Тогда в вашей таблице стилей:

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

Так что вместо этого вы будете манипулировать каждым из цветов границы td. Боль, но работает достаточно хорошо, когда вы освоитесь.

Answer 3

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

Где tblMenuTabls - это имя класса таблицы, а tblOverRow - это класс CSS с определением при наведении.

Answer 4

Может быть, это хорошая отправная точка:

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