html - 突出显示相同的第 n 个子元素

Question

假设我有下表:

+----------+
| A  |  B  |
+----------+
| 1  |  2  |
+----------+

我想做的是，当我将鼠标悬停在 A 上时，1 会获得某些 css 样式，B 和 2 也是如此。有没有办法不使用 js 来做到这一点？

Here's a fiddle to see what I mean

Answer 1

使用此标记和纯 CSS 是不可能的，因为您需要使用 td:hover 在鼠标悬停时应用 CSS 规则，并且没有选择器可以让您向上移动 DOM 树(这是必要的，因为您想要定位与悬停的分支不同的分支中的单元格)。

如果您可以修改，那么 Dustin 的解决方案就可以工作；如果你可以使用 JS 那么这也是 sprinkling a little jQuery 的问题在 table 上:

$("td").on("mouseenter mouseout", function() {
    var $this = $(this);
    $this.closest("table").find("td:nth-child(" + ($this.index() + 1) + ")")
                          .toggleClass("hover");
});