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

Question

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

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

Я смог изменить цвет фона строки с этим:

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

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

Спасибо!

13

jquery css

Источник

user2849 27 мар '09 в 01:47

4 ответа

Решение

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

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

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

4

Источник

user81589 27 мар '09 в 01:58

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

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

1

Источник

user792483 10 июн '11 в 09:20

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

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

0

Источник

user72563 27 мар '09 в 01:57

Другие вопросы по тегам jquery css

user72280 27 мар '09 в 02:12 2009-03-27 02:12 · Accepted Answer · 2009-03-27 02:12

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