将鼠标悬停在同一表格中的另一行上时更改表格行的背景颜色

Question

这是我在这里的第一篇文章，我绝不是一个熟练的 HTML/CSS/JavaScript 程序员，所以如果我表达得不够清楚，请多多包涵 - 如果太罗嗦，请见谅！

我正在为表格内容使用经典的 HTML 表格，并且希望能够更改与我当前悬停的行不同的行的背景颜色。

这样做的原因是我有很多表被分成“子表”，每个表都有自己的标题和下面的一或多行。这些子表 - 都具有相同的样式 - 但是没有编码为表，而是我只是使用不同的类来设置它们的样式（这主要是因为它们太多又太小，每个包含 1-6 行包括标题）。

我想要做的是，一旦您将任何子表悬停，其标题和您当前指向的行都应该改变背景颜色（后者很容易通过 CSS 实现）。感谢在网上找到的 JavaScript，我设法实现了这一点 - 请参阅 sample code，这可能更好地解释了这一点，另请参阅下面的代码 - 但是每个子标题都需要一个唯一的 ID。 （请注意，每个子表都使用单独的 tbody - 如果 onMouseover 事件改为应用于每一行，则子标题的颜色会在从一行悬停到另一行时闪烁/继续 - 这永远不会发生CSS，但仅限于 JavaScript - 当然，还要创建更多代码。）

不必为每个子标题分配唯一的 ID，我想要一个使用类的解决方案，因为每个子表都使用相同的子表（我当然会为 tbody 分配一个类然后）。我想这个棘手的部分可能是确保只有当前子表的标题受到影响，而不是同时受到影响。 如果创建一个解决方案更容易，其中每个子表实际上都被编码为一个单独的表（从语义的角度来看这也可能更好？），那么请这样做。如果 JavaScript 自己应用 onMouseover 等事件当然更好，这样我就不必将其放入每个子表的内联代码中 - 我已经看到这可以用于按钮等等，所以我想这是可能的。

我从未使用过 jQuery，因此更喜欢纯 JavaScript 解决方案。

有关示例代码，请再次查看my fiddle

非常感谢您的任何意见！

JavaScript：

function changeTo(myId) { document.getElementById(myId).className='sub-header-highlight'; }
function changeBack(myId) { document.getElementById(myId).className='sub-header'; }

CSS：

thead { color: #FFF; background: #000; }
.sub-header { color: #FFF; font-weight: bold; background: #F00; }
.sub-header-highlight { color:# FFF; font-weight: bold; background: #0F0; }
tr.sub-header:hover { background: #0F0; } /* if JS turned off */

.sub-row1 { color: #000; background: #FFF; }
.sub-row2 { color: #000; background: #EEE; }
tr.sub-row1:hover, .sub-row2:hover { background: #FF0; }

部分 HTML：

<tbody onMouseover="changeTo('sub1');" onMouseout="changeBack('sub1');">
   <tr class="sub-header" id="sub1">
      <td>Sub-Header 1</td>
   </tr>
   <tr class="sub-row1">
      <td>Contents of row 1</td>
   </tr>
   <tr class="sub-row2">
      <td>Contents of row 2</td>
   </tr>
   <tr class="sub-row1">
      <td>Contents of row 3</td>
   </tr>
</tbody>

Answer 1

您可以大大简化 HTML 标记和 CSS，并且无需使用 Javascript。

• 首先，除了您的备用行样式外，所有类都可以出来（除非您对 IE 8 及以下版本不感兴趣，在这种情况下，您可以取出 IE 条件 CSS 和类名。请参阅browser CSS selector compatibility chart。 )
• 其次，将子标题内的每个td 更改为th。
• 第三，使用父级tbody 上的:hover 伪选择器按照指定设置th 的样式。

查看此working in a jsfiddle，经测试可在 IE 7 和 Firefox 14 中完美运行。

这是 CSS：

table { border-collapse:collapse; }
thead { color: #FFF; background-color: #000; }

tbody th { color: #FFF; font-weight: bold; background-color: #F00; text-align:left; }
tbody:hover th { background: #0F0; }

tbody tr:nth-child(odd) { background-color:#EEE; }
tbody tr:hover td { background: #FF0; }

风格注释：

• CSS 属性“背景”不仅仅需要颜色，还会重置其他属性。如果您只想设置样式，请使用“背景颜色”。
• tr:hover 上的额外 td 是必需的，以便特定规则使 IE 赋予它比奇数行的特殊颜色更高的优先级。
• “奇数”行实际上是数据的偶数行，因为子标题占用了第一个奇数行。
• 直接在桌子上使用 CSS border-collapse:collapse 而不是 cellspacing。

我不得不将 IE 的条件 CSS 放在小提琴的 HTML 部分，因为它必须在 style 标记之外。

<!--[if lte IE 8]>
<style type="text/css">
  tbody tr.odd { color: #000; background: #EEE; }
</style>
<![endif]-->

这是 HTML。看看它现在有多干净？

<table>
   <thead>
      <tr>
         <th>MAIN HEADER</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th>Sub-Header 1</th>
      </tr>
      <tr>
         <td>Contents of row 1</td>
      </tr>
      <tr class="odd">
         <td>Contents of row 2</td>
      </tr>
      <tr>
         <td>Contents of row 3</td>
      </tr>
   </tbody>
   <tbody>
      <tr>
         <th>Sub-Header 2</th>
      </tr>
      <tr>
         <td>Contents of row 1</td>
      </tr>
   </tbody>
   <tbody>
      <tr>
         <th>Sub-Header 3</th>
      </tr>
      <tr>
         <td>Contents of row 1</td>
      </tr>
      <tr class="odd">
         <td>Contents of row 2</td>
      </tr>
   </tbody>
</table>

最后，我意识到颜色可能只是示例，所以我可以建议明亮的原色不适用于人类的认知反应吗？您可以改为使用一种突出显示效果。请参阅我为您整理的a working example，使用（在我看来）更令人愉悦的颜色。当您将鼠标悬停在该部分上时，看看它是如何“发光”的？漂亮！

注意：在 IE8 及之前的版本中，右侧会有一个额外的边框。如果你有一个多列表并且你喜欢内边框的东西并且想要支持 IE8 及更低版本，你需要在每一行的最后一个单元格中添加一个类，这样它就可以删除它的右边框。

Answer 2

您可以使用纯 CSS（具有通常的浏览器兼容性条件）来实现这一点，因此假设您使用的是相对现代的 Chrome、Safari、Firefox、Opera 或者可能是 IE 9（或更高版本）：

tbody:hover tr.sub-header {
    background-color: #0f0;
}

tbody tr.sub-row:hover {
    background-color: #f90;
}​

JS Fiddle demo（显然，根据您的喜好调整颜色；这些只是为了演示）。

当然，值得一提的是，某些浏览器可能不会显示tr 元素的background-color（因为它在后面显示background-color 的td 元素），在在这种情况下，您可能需要修改选择器以定位相关的 td 元素：

tbody:hover tr.sub-header td {
    background-color: #0f0;
}

tbody tr.sub-row:hover td {
    background-color: #f90;
}​