css - 当表格行悬停时更改包含链接的背景颜色

Question

我一直在使用以下 jquery 代码来设置表格行的样式。

$('tr').hover(function() {  
    $('tr td').css('color', '#ffffff'); 
    $('tr td a').css('background', '#0080ff');  
});

$('tr').mouseleave(function() { 
    $('tr td').css('color', '#222222'); 
    $('tr td a').css('background', '#ffffff');
});

这工作得很好，但我想知道有一个 CSS 替代品。这似乎是一种比我现在拥有的方法更有效的方法，但我对 CSS 真的不太了解。

使用以下 CSS 的问题

tr:hover {
    color:#ffffff;
}

是当表格行悬停时锚标签仍然保持相同的颜色。是否有任何通过 CSS 悬停在表格行上的方法可以触发嵌套在给定表格行内的锚标签来更改颜色？

Answer 1

它有点取决于您的其他 CSS 选择器，但这可能会起作用：

tr:hover td {
    color: white;
}


tr:hover td a {
    background: #0080ff;
}

Answer 2

td:hover a {
    your link style on row hover
}