Html 高亮显示相同的第n个子元素

假设我有下表：

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

我想这样做，当我将鼠标悬停在

A

上时，

1

会获得特定的css样式，对于

B

和

2

也是如此。有没有一种不用js就能做到这一点的方法

---

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

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

---

​

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

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

---

​

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

---

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

如果您可以更改标记，下面是JSFIDLE对CSS的响应

---

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

使用此标记和纯CSS是不可能的，因为您需要使用

td:hover

在鼠标上方应用CSS规则，并且没有允许您沿着DOM树向上移动的选择器（这是必要的，因为您希望将位于与悬停分支不同的分支中的单元格作为目标）

如果您可以修改，那么Dustin的解决方案就可以工作；如果您可以使用JS，那么这也是摆在桌面上的一个问题：

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

---

使用这种标记和纯CSS是不可能的，因为您需要使用

td:hover

在mouseover上应用CSS规则，并且没有允许您向上移动DOM树的选择器（这是必要的，因为您希望将位于与被悬停的分支不同的分支中的单元格作为目标）

如果您可以修改，那么Dustin的解决方案就可以工作；如果您可以使用JS，那么这也是摆在桌面上的一个问题：

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

---

嗨，你可以这样做

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>​

A.
B
1.
2.
​

---

这里有现场演示

您好，您可以这样做

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>​

A.
B
1.
2.
​

---

这里的实时演示

你想让1在A悬停时与A的样式相同，而B-2的样式相同吗？数据可以按列生成吗？在每列使用div可以使用悬停来应用于列。在视觉上，它可以被设计成完全相同的样式。@JTSmith:是的，

A-1

和

B-2

的规则相同。@DustinGraham:I'd rath呃，不是这样做的吗？你想让1在A悬停时获得与A相同的样式，而B-2也一样吗？数据可以按列生成吗？在每列使用div可以使用hover来应用于列。从视觉上看，它可以被设计成完全相同的样式。@JTSmith:是的，

A-1

和

B-2

的规则相同。@DustinGraham:I'dr不这样做是“一种不使用JS的方法”吗？我尝试过使用css3转换，但你不能像使用jquery那样做，对不起，这是“一种不使用JS的方法”吗？我已经尝试过使用css3转换，但您不能像使用jquery那样，所以您可以将

mouseenter mouseout

更改为just

hover

您可以将

mouseenter mouseout

更改为just

hover