1

HTMLとCSSのみを使用して、1つにカーソルを合わせると、すべてクラス「xyz」に属する複数のテーブルセルの境界線（または他のスタイル要素）を変更できますか？

動的に生成されたテーブルが2つあります。この特定の例では、1つは幅5セル、高さ4セルで、もう1つのテーブルは4x3です。

がある：

  • クラス「xyz」に属する最初のテーブルの2つのセル。
  • クラス「xyz」に属する2番目のテーブルの1つのセル。

表1：

+----+----+----+----+----+
|    |xyz |    |    |    |
+----+----+----+----+----+
|    |    |    |    |    |
+----+----+----+----+----+
|    |    |    |xyz |    |
+----+----+----+----+----+
|    |    |    |    |    |
+----+----+----+----+----+

表2：

+----+----+----+----+
|    |    |    |xyz |
+----+----+----+----+
|    |    |    |    |
+----+----+----+----+
|    |    |    |    |
+----+----+----+----+

私にできることは次のとおりです。

  • 特定の境界線でフォーマットされたすべての「xyz」セルを取得します。
  • 1つの「xyz」セルを取得して、ホバー時のスタイルを更新します（td.xyz：hover {...}）。

私ができないことは：

  • 「xyz」に属するすべてのセルを取得して、1つにカーソルを合わせたときにスタイルを更新します。

HTMLとCSSのみを使用してこれを行うことは可能ですか？

4

2 に答える 2

1

いいえ、CSSは兄弟または子要素でのみ機能します。同じ行のテーブルセルは隣接する兄弟ですが、他の行のセルは隣接していません。したがって、これを実現するにはJavaScriptを使用する必要があります。

于 2013-03-13T19:13:30.250 に答える
1

jQueryソリューションは次のようになります。

$('.cellToHover').hover(function() {
    $('.cellToHover').addClass('hovered');
}, function() {
    $('.cellToHover').removeClass('hovered');
});

これがフィドルです。

于 2013-03-13T19:15:33.823 に答える