Question

这是我在这里的第一篇文章，我不是一个熟练的HTML / CSS / JavaScript程序员，所以如果我没有表达自己的清楚，请耐心等待 - 抱歉，如果它太罗嗦了！

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

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

我想要做的是，一旦你悬停任何子表，它的标题和你当前指向的行应该改变背景颜色（后者很容易用CSS实现）。感谢网上找到的JavaScript，我已经成功实现了这一点 - 请参阅sample code，这可能更好地解释了这一点，另请参阅下面的代码 - 但是每个子标题需要一个唯一的ID。（请注意，每个子表使用一个单独的tbody - 如果onMouseover事件被应用于每一行，当从一行悬停到另一行时，子标题的颜色将闪烁/开启和关闭 - 这从不使用CSS但只使用JavaScript - 当然还要创建更多代码。）

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

我从未使用过jQuery，所以首选纯JavaScript解决方案。

有关示例代码，请参阅 my fiddle

非常感谢任何意见！

JavaScript：

onMouseover

CSS：

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

HTML的一部分：

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

Answer 1

你可以用纯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 { {1}}元素），在这种情况下，您可能需要修改选择器以定位相关的td元素：

td

Answer 2

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

首先，除了你的替代行样式之外，所有类都可以出现（除非你不关心IE 8及以下版本，在这种情况下你可以取出IE条件CSS和类名。请参阅{{3} }。）
其次，将子标题中的每个td更改为th。
第三，使用父:hover上的tbody伪选择器按照指定设置th的样式。

请参阅此browser CSS selector compatibility chart，经测试可在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属性“background”不仅仅需要颜色，还会重置其他属性。当你想要设置样式时，请使用“background-color”。
td上的额外tr:hover是必需的，以便特殊规则使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>

最后，我意识到颜色可能只是一些例子，所以我可以建议明亮的原色不能很好地适应人类的认知反应吗？你可以改为一种突出效果。请参阅我为您准备的working in a jsfiddle，使用（对我而言）更令人愉悦的颜色。当你将鼠标悬停在它上面时，看看它是如何“发光”的？美丽！

a working example

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

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

2 个答案: