使用 CSS 在悬停时突出显示两个表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8763098/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highlight two table rows on hover with CSS
提问by Sparafusile
Changing the background color of a row in a table on mouse over is pretty simple using CSS:
使用 CSS 在鼠标悬停时更改表格中行的背景颜色非常简单：
.HighlightableRow:hover
{
background-color: lightgray;
}
And some HTML:
还有一些 HTML：
<table>
<tr class=HighlightableRow>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<tr>
<tr class=HighlightableRow>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<tr>
</table>
Occasionally, I want to highlight a pair of rows when I hover my mouse over either of them. For example, when displaying a list of work orders in a table, I would have one row with the creator, date created, urgency, etc. and the second row would have an except of the work that was requested.
有时，当我将鼠标悬停在其中任何一行上时，我想突出显示一对行。例如，当在表格中显示工作订单列表时，我将有一行包含创建者、创建日期、紧急程度等，而第二行将包含请求的工作除外。
Is there any way, other than using the JavaScript onmouseover/onmouseout event handlers, to create this effect like the one shown above? Preferably using CSS.
除了使用 JavaScript onmouseover/onmouseout 事件处理程序之外，还有什么方法可以像上面显示的那样创建这种效果？最好使用CSS。
回答by Chris
Use the tbody element to group rows.
使用 tbody 元素对行进行分组。
tbody:hover { background:#eee;}
HTML:
HTML：
<table>
<tbody>
<tr>
<td>Hello</td>
<td>World!</td>
</tr>
<tr>
<td>Hello</td>
<td>World!</td>
</tr>
</tbody>
</table>
Check out the details about "tbody", "thead" and "tfoot" for the correct usage.
查看有关“tbody”、“thead”和“tfoot”的详细信息以了解正确用法。
回答by Nix
This is actually pretty simple to do, if you are content with highlighting the next row.
如果您满足于突出显示下一行，这实际上非常简单。
tr:hover, tr:hover + tr {
background:#eee; }
The css +selector merely selects the immediatly following element, if it matches your type. So in this case, it highlights the current row, plus the next row.
css+选择器仅选择紧随其后的元素（如果它与您的类型匹配）。所以在这种情况下，它突出显示当前行，加上下一行。
See jsFiddle
Of course, there are limitations, if you want to group two, as you cannot do "this row, and the previous". In that case, I would probably nest the two rows in a new table, inside the first row. Make sense?
当然，有限制，如果你想分组两个，因为你不能做“这一行，和前一行”。在这种情况下，我可能会将这两行嵌套在新表中的第一行内。有道理？
EDIT: something like this
编辑：像这样
HTML
HTML
<table>
<tr>
<td>
<table>
<tr>
<td>Hello</td>
<td>World!</td>
</tr>
<tr>
<td>Hello</td>
<td>World!</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
CSS
tr:hover tr { background:#eee; }
Working fiddle
工作小提琴
回答by Sheridan Bulger
I don't know of a way to cause events on one object to interact with another object in vanilla CSS. Generally, when you want to wire up such custom events you are stuck using some sort of actual logical programming language (in this case javascript).
我不知道有什么方法可以使一个对象上的事件与 vanilla CSS 中的另一个对象交互。通常，当您想要连接此类自定义事件时，您会使用某种实际的逻辑编程语言（在本例中为 javascript）。
Now, if you do decide to go that route, I can help you with some very simple jQuery to do exactly what you need :). jQuery's event binding model actually takes a lot of the pain out of javascript.
现在，如果你决定走那条路，我可以用一些非常简单的 jQuery 帮助你做你需要的事情:)。jQuery 的事件绑定模型实际上减轻了 javascript 的痛苦。
