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

Question

假设我有下表：

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

我想这样当我将鼠标悬停在上面时A，它1会获得某些 css 样式，同样适用于B和2. 有没有办法不使用js来做到这一点？

这是一个小提琴，看看我的意思

Answer 1

使用此标记和纯 CSS 是不可能的，因为您需要使用td:hover鼠标悬停时应用 CSS 规则，并且没有选择器可以让您沿着 DOM 树向上移动（因为您想要定位居住在与悬停的分支不同）。

如果你可以修改，那么像达斯汀这样的解决方案就可以工作；如果你可以使用 JS，那么在桌面上撒一点 jQuery也是一个问题：

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

Answer 2

如果您可以更改标记，这里有一个响应 jsfiddle 可以使用 CSS 执行此操作。

http://jsfiddle.net/dBrd2/

编辑：啊，但我看到你回复了我的评论并说你不想。无论如何，如果你重新考虑，只是一个想法。

Answer 3

嗨，你可以这样做

CSS

td {
    position: relative;
    border: 1px solid black;
    padding: 50px;
}


tr .fir{
    background:red;
}
table:hover .fir{
    background:green;
}



​

HTML

<table>
<tr>
    <td class="fir">a</td>
    <td class="sec">b</td>
</tr>
<tr>
    <td class="fir">1</td>
    <td class="sec">2</td>
</tr>
</table>​

现场演示http://jsfiddle.net/rohitazad/en5rB/3/

Answer 4

您可以创建一个名为 .hover 的类，并这样做以将样式添加到具有同一类的所有 td

$("td.fir").bind("mouseenter", function(){
   $(".fir").addClass("hover");
});​​​​
$("td.fir").bind("mouseleave", function(){
   $(".fir").removeClass("hover");
});

​</p>