突出显示相同的第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也是一个问题：

$("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

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

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

Answer 4

嗨，你可以这样做

<强>的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/