假设我有下表:
+----------+
| A | B |
+----------+
| 1 | 2 |
+----------+
我想做的是,当我将鼠标悬停在 A
上时,1
会获得某些 css 样式,B
和 2 也是如此
。有没有办法不使用 js 来做到这一点?
Here's a fiddle to see what I mean
最佳答案
使用此标记和纯 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");
});
关于html - 突出显示相同的第 n 个子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10097646/