Dodawanie koloru tła i obramowania do wiersza tabeli po najechaniu myszą przy użyciu jquery

Question

Czy ktoś wie o sposobie dodania obramowania do wiersza tabeli z innym kolorem tła, gdy mysz unosi się nad rzędem?

byłem w stanie zmienić kolor tła wiersza z tym:

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

Ale jestem w stanie dodać kolor obramowania. Zdaję sobie sprawę, że ramek nie można bezpośrednio zastosować do znacznika wiersza tabeli, ale mam nadzieję, że ktoś zna magię jQuery voodoo, która może znaleźć komórki tabeli w wybranym wierszu i zastosować do nich pewne style, aby utworzyć obramowanie.

Dzięki!

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

Może to dobry punkt wyjścia:

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

Answer 3

Najprościej byłoby addClass i removeClass w wierszu. Następnie w arkuszu stylów:

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

Więc będą faktycznie manipulowania każdym z kolorów td granicznych zamiast. Ból, ale działa dobrze, gdy się go opanuje.

Answer 4

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

Gdzie tblMenuTabls to nazwa klasy stół i tblOverRow jest klasa CSS z definicji hover.