CSSホバー親子アイテム

StackOverflow https://stackoverflow.com/questions/1817575

  •  08-07-2019
  •  | 
  •  

質問

CSSスタイルを設定して、テーブルにカーソルを合わせたときにネストされたテーブルのセルを強調表示しようとしています。

以下のサンプルコードを参照してください。....

<html>
    <head>
        <style type='text/css'>
        table
        {
            border: solid 1px black;
        }

        table.Content:hover td.ContentIndent
        {
            background-color: #AAAAAA;
        }
        </style>
    </head>
    <body>
        <table class="Content">
            <tr>
                <td class="ContentIndent">Root Indent, could be highlighted when this table is moused over</td>
                <td>
                    <table class="Content">
                        <tr>
                            <td class="ContentIndent">Indent 1 - Should be highlighted only when this table is moused over</td>
                            <td>Content 1 - Indent 1 should be highlighted when this table is moused over</td>
                        </tr>
                    </table>
                    <table class="Content">
                        <tr>
                            <td class="ContentIndent">Indent 2 - Should be highlighted only when this table is moused over</td>
                            <td>Content 2 - Indent 2 should be highlighted when this table is moused over</td>
                        </tr>
                    </table>
                </td>
            <tr>
        </table>
    </body>
</html>

基本的に、子テーブルの1つがマウスオーバーされると、インデントセルが強調表示されます。親セルのインデントセルが強調表示されている場合もクールです。

残念ながら、現在の設定方法では、マウスオーバーしたテーブルに関係なく、両方の子セルのインデントセルが強調表示されます。 Firefox 3.5とIE 8でこれを試したところ、同じ結果が得られました。

このチュートリアルおよび関連するデモそれは基本的に私がやろうとしていることを行いますが、テーブルの代わりにネストされたリストを使用していました。しかし、<！> gt;を使用しようとすると、演算子（スタイルをtable.Content:hover > td.ContentIndentにするため）はまったく機能しません。違いがわからない。

役に立ちましたか？

解決

まず、IE6をサポートする場合は、ブラウザーがアンカー（リンク、つまり:hoverタグ）の<a>擬似要素のみをサポートするため、何らかの説明のJavascriptが必要になります。

もう1つの問題は、これを行うために子CSSセレクターが必要になることです。これはIE6ではサポートされていません。

つまり、非IE6互換バージョンは次のとおりです。

table.Content:hover > tbody > tr > td.ContentIndent { background: #AAA; }

暗黙的に作成される<tbody>要素に注意してください。

子（<！> gt;）なしでこの式を選択します：

table.Content td.ContentIndent { ... }

すべてのインデントセルを取得します。これは子孫セレクターと呼ばれ、最上位のコンテンツテーブルがそれらすべての親です。

この問題を次のように回避できます：

table.Content:hover td.ContentIndent { background: #AAA; }
table.Content:hover table.Content td.ContentIndent: background: #FFF; }

2番目の方法は、基本的に、深いインデントを通常のフォーマットに戻すことで、この問題をキャンセルします。これは、子セレクターで解決できるIE6の問題を処理するためのかなり標準的な手法ですが、この方法でスタイルを元に戻すことは常に可能または実用的ではありません。

IE6をサポートするには、Javascriptライブラリをお勧めします。私の優先オプションはjQueryです。これには次のようなコードが含まれます。

$(function() {
  $("table.Content").hover(function() {
    $(this).children("tbody").children("tr")
      .children("td.ContentIndent").addClass("hover");
  }, function() [
    $(this).children("tbody").children("tr")
      .children("td.ContentIndent").removeClass("hover");
  });
});

with：

td.hover { background: #AAA; }

他のヒント

問題は、<！> quot; Content <！> quot;を使用していることです。周囲のテーブルのクラスも同様であるため、カーソルが親に入ると、テーブル全体でホバーイベントがトリガーされます。親テーブルに別のクラス（たとえば<！> quot; Parent <！> quot;）を与えると、正常に機能します。

のようなセレクター

.Content td

は通常、.Contentの下のすべてのtdに適用されます。 <！> gt;ルールが要素のイミディエートチャイムに対してのみ有効であり、より深いネストされたものに対しては無効であることを指定します。 7より前のIEは<！> gt;を認識しません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top