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

Question

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

我有两个动态生成的表。在这个特定的例子中，一个是5个细胞宽，4个细胞高，另一个是4乘3。

有：

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

表1：

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

表2：

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

我能做的是：

• 获取所有使用特定边框格式化的“xyz”单元格;
• 获取一个“xyz”单元格以在悬停时更新它的样式（td.xyz:hover {...}）。

我不能做的是：

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

是否可以仅使用HTML和CSS执行此操作？

Answer 1

不，CSS仅适用于兄弟或子元素。表格单元格在同一行是相邻的兄弟姐妹，但其他行中的单元格则不是。因此，您需要使用JavaScript来完成此任务。

Answer 2

jQuery解决方案将是：

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

这是Fiddle。