CSS のみを使用して、ホバー時にテーブルの行と列の両方を強調表示するにはどうすればよいですか?

CSS "Hover" 擬似クラスを使用したホバー時のテーブルの行と列の強調表示

このシナリオでは、ホバー時にテーブルの行と列の両方を強調表示します のようなセマンティック要素を使用すると可能です。と

。純粋な CSS メソッドを見てみましょう:

強調表示に擬似要素を使用する

行と列を強調表示するには、::before および ::after 擬似要素を利用します。要素。これらは、ドキュメントのフローの外側に存在する、絶対的に配置された仮想要素を作成します:

td:hover::before, /* Highlight rows on hover */
.row:hover::before { 
    background-color: #ffa;
    content: '<pre class="brush:php;toolbar:false"><tr class="row">
    <th class="col">50kg</th>
    <th class="col">55kg</th>
    <th class="col">60kg</th>
    <th class="col">65kg</th>
    <th class="col">70kg</th>
</tr>

a0'; height: 100%; left: -5000px; position: absolute; top: 0; width: 10000px; z-index: -1; } td:hover::after, /* Highlight columns on hover */ .col:hover::after { background-color: #ffa; content: 'a0'; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; }

• td または .row をホバーすると、行全体の強調表示がトリガーされます。
• td または .colホバーされると列全体のハイライトがトリガーされます。
• z-index: -1 はテーブル データ セルの下にハイライトを配置します。
• position: 絶対的で非常に大きなディメンションにより、ハイライトがセルの境界を越えて拡張されます。
• オーバーフロー: テーブル上で非表示にすると、オーバーフローが非表示になります。

特異性のための CSS クラス

HTML では、 のようなクラスを追加します。 row と .col を使用してターゲット要素を明確に指定します。

結論

このソリューションは、純粋に CSS を使用してホバー時に行と列の両方を強調表示します。 JavaScript または jQuery。すべての最新のブラウザで動作しますが、古いブラウザでは正常に機能が低下します。

以上がCSS のみを使用して、ホバー時にテーブルの行と列の両方を強調表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。