使用jquery在hover时向表行添加背景颜色和边框

当鼠标hover在行上时，是否有人知道将边框添加到具有不同背景颜色的表格行的方法？

我已经能够改变行的背景颜色：

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

但是我无法添加边框颜色。 我意识到边框不能直接应用于表格行标签，但我希望有人知道一些jQuery伏都魔法可以在所选行中找到表格单元格并将一些样式应用于创建边框的那些样式。

谢谢！

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

你最好的选择是行上的addClass和removeClass。 然后在你的样式表中：

 .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是带有hover定义的CSS类。

Answer 4

也许这是一个很好的起点：

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