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。

这是一个有效的代码：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

鼠标悬停，mouseout事件时背景颜色不会改变

1 个答案: