html - 同じn番目の子要素を強調表示する

Question

次の表があるとします。

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

Aカーソルを1合わせると、特定のcssスタイル、同上、Bおよびが表示されるように作成したいと思います2。jsを使用せずにこれを行う方法はありますか？

これが私の意味を理解するためのフィドルです

Answer 1

このマークアップと純粋なCSSではtd:hover、マウスオーバーにCSSルールを適用するために使用する必要があり、DOMツリーを上に移動できるセレクターがないため不可能です（これは、ホバーされているブランチとは異なるブランチ）。

変更できる場合は、Dustinのようなソリューションが機能します。JSを使用できる場合は、テーブルにjQueryを少し振りかけることも問題です。

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

Answer 2

マークアップを変更できる場合は、CSSでこれを行うための応答jsfiddleを次に示します。

http://jsfiddle.net/dBrd2/

編集：ああ、でもあなたが私のコメントに返信して、やりたくないと言ったのを見ます。とにかく、あなたが再考するならば、ただの考え。

Answer 3

.hoverというクラスを作成し、同じクラスのすべてのtdにスタイルを追加するためにこのようにすることができます

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

</ p>

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/