
CSS "Hover" 擬似クラスを使用したホバー時のテーブルの行と列の強調表示
このシナリオでは、ホバー時にテーブルの行と列の両方を強調表示します のようなセマンティック要素を使用すると可能です。と
。純粋な CSS メソッドを見てみましょう:
強調表示に擬似要素を使用する
行と列を強調表示するには、::before および ::after 擬似要素を利用します。要素。これらは、ドキュメントのフローの外側に存在する、絶対的に配置された仮想要素を作成します:
1 2 3 4 5 6 7 8 9 10 | td:hover::before,
.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 サイトの他の関連記事を参照してください。