1

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

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

有：

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

表格1：

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

表 2：

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

我能做的是：

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

我不能做的是：

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

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

4

2 回答 2

1

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

于 2013-03-13T19:13:30.250 回答
1

A jQuery solution would be:

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

Here is a Fiddle.

于 2013-03-13T19:15:33.823 回答