当鼠标悬停在其中一个上时，如何为共享一个类的所有元素添加边框？答案

【问题标题】：How can I add a border to all the elements that share a class when the mouse has hovered over one of them?当鼠标悬停在其中一个上时，如何为共享一个类的所有元素添加边框？
【发布时间】：2013-03-01 22:03:09
【问题描述】：

是否可以通过仅使用 HTML 和 CSS 将鼠标悬停在一个表格单元格上来更改所有属于“xyz”类的多个表格单元格的边框（或其他样式元素）？

我有两个动态生成的表。在这个特定的例子中，一个是 5 个单元格宽和 4 个单元格高，另一个表格是 4 x 3。

有：

第一个表中属于“xyz”类的2个单元格；
第二个表格中的 1 个单元格属于“xyz”类。

表 1：

+----+----+----+----+----+
|    |xyz |    |    |    |
+----+----+----+----+----+
|    |    |    |    |    |
+----+----+----+----+----+
|    |    |    |xyz |    |
+----+----+----+----+----+
|    |    |    |    |    |
+----+----+----+----+----+

表 2：

+----+----+----+----+
|    |    |    |xyz |
+----+----+----+----+
|    |    |    |    |
+----+----+----+----+
|    |    |    |    |
+----+----+----+----+

我能做的是：

获取所有带有特定边框的“xyz”单元格；
获取一个“xyz”单元格以在悬停时更新其样式 (td.xyz:hover {...})。

我不能做的是：

让所有属于“xyz”的单元格在悬停在一个单元格上时更新其样式。

是否可以仅使用 HTML 和 CSS 来做到这一点？

【问题讨论】：

恐怕这是不可能的。你必须使用 JavaScript。

标签： html css class html-table

【解决方案1】：

jQuery 解决方案是：

$('.cellToHover').hover(function() {
    $('.cellToHover').addClass('hovered');
}, function() {
    $('.cellToHover').removeClass('hovered');
});

这是Fiddle。

【讨论】：

我相信 OP 要求提供 HTML/CSS 解决方案。
@Bernie：他做到了，他得到了正确的答案，2 次。如果这对他来说也是一个选择，我只是想给他一个替代解决方案。 ;-)
很公平，最初没有看到您对这个问题的评论。道歉。
我可能会使用这个。如果没有必要，我只是不想包含 jquery。谢谢！
@user2166884：如果你不想用的只是 jQuery，你可以用纯 JavaScript 来做，但是不太舒服。

【解决方案2】：

不，CSS 仅适用于 sibling 或 child 元素。 同一行中的表格单元格是相邻的兄弟，但其他行中的其他单元格不是。因此，您需要使用 JavaScript 来完成此操作。

【讨论】：