背景颜色在 mouseover、mouseout 事件时没有改变

Question

我有一个简单的 html 表格布局：

<table class="grid">
<thead>
<tr><th>1st Col</th><th>2nd Col</th><th>3rd Col</th><th>4th Col</th></tr>
</thead>
<tbody>
<tr><td>AAAA</td><td>BBBB</td><td>CCCC</td><td>DDDD</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr>
<tr><td>AAaa</td><td>BBbb</td><td>CCcc</td><td>DDdd</td></tr>
<tr><td>aaAA</td><td>bbBB</td><td>ccCC</td><td>ddDD</td></tr>
</tbody>
</table>

这个表格的背景颜色是在css中定义的：

table.grid > * > tr > * {
  border-right: 4px groove #D1D1D1;
  border-bottom: 4px groove #D1D1D1;
  padding: 0;
  background-color: #FFFFCC;
}

因此，在加载时，此表的行是浅黄色 (#FFFFCC)。当用户将光标移到表格上时，我希望相应行的颜色发生变化以产生突出显示效果。我使用了以下jquery代码来实现高亮效果：

$("body").on("mouseover mouseout",".grid > tbody > tr", function(){
            $(this).toggleClass("highlight");
});

高亮类再次出现在同一个 css 文件中：

tr.highlight{
  color: red;
  font-style: italic;
  background-color: green;
}

我发现，除了相应行的背景颜色外，字体样式和字体颜色都在变化。所以代码在某种程度上是有效的，但并不完全。

但是，如果我从 css 中删除背景颜色样式，即在加载时表格为白色，则行的背景颜色在将光标移到其上时变为绿色：

table.grid > * > tr > * {
  border-right: 4px groove #D1D1D1;
  border-bottom: 4px groove #D1D1D1;
  padding: 0;
  //background-color: #FFFFCC;<--- I have to remove this line
}

您有什么想法吗，如果在加载时已经给了背景颜色，我该如何更改行颜色？

Answer 1

那些 CSS 选择器真的很糟糕，悬停效果不需要 JS。简化它。

tr.highlight 不会影响任何事情，因为您将背景颜色设置为 tr 的子元素，而不是 tr 本身。

另外，阅读CSS specificity。

---

这是一个工作代码：

table.grid tr td {
  border-right: 4px groove #D1D1D1;
  border-bottom: 4px groove #D1D1D1;
  padding: 0;
  background-color: #FFFFCC;
}

table.grid tr:hover td{
  color: red;
  font-style: italic;
  background-color: green;
}

<table class="grid">
<thead>
<tr><th>1st Col</th><th>2nd Col</th><th>3rd Col</th><th>4th Col</th></tr>
</thead>
<tbody>
<tr><td>AAAA</td><td>BBBB</td><td>CCCC</td><td>DDDD</td></tr>
<tr><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr>
<tr><td>AAaa</td><td>BBbb</td><td>CCcc</td><td>DDdd</td></tr>
<tr><td>aaAA</td><td>bbBB</td><td>ccCC</td><td>ddDD</td></tr>
</tbody>
</table>