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

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

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

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

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

Спасибо!

Ответы

Ответ 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');
        });
    });

Ответ 2

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

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

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

Ответ 3

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

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