使用jquery在悬停时向表格行添加背景颜色和边框 [英] Add background color and border to table row on hover using jquery

问题描述

有没有人知道如何在鼠标悬停在行上时向背景颜色不同的表格行添加边框？

Does anyone know of a way to add a border to a table row with a different background color when the mouse hovers over the row?

我已经能够使用以下命令更改行的背景颜色：

I've been able to change the background color of the row with this:

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

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

But I'm unable to add a border color. I realize borders can't be directly applied to a table row tag, but I'm hoping someone know some jQuery voodoo magic that can find the table cells within the selected row and apply some styles to those to create the border.

感谢！

推荐答案

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

这篇关于使用jquery在悬停时向表格行添加背景颜色和边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！