CSS ホバー効果を表のセルの境界を越えて拡張するにはどうすればよいですか?

CSS ホバー効果をセル境界を超えて拡張: 列、列グループ内の表を強調表示

データを表形式で表示する場合、ホバー時に特定のセルを強調表示多くの場合望ましいです。ただし、ホバーされたセルと交差する行と列を強調表示すると、データの明瞭さがさらに向上します。これは、テーブルが複数の測定単位にまたがる場合に特に便利です。

純粋な CSS ソリューション

幸いなことに、この拡張された強調表示効果は純粋な CSS で実現できます。擬似要素 (::before、::after)、Z インデックス操作、および絶対配置を利用することで、セルの境界を越えて拡張するハイライト オーバーレイを作成できます。

実装

次の CSS コードは実装を示しています。

table {
    overflow: hidden;
    z-index: 1;
}

td, th {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::before,
.row:hover::before { 
    background-color: #ffa;
    content: '<pre class="brush:php;toolbar:false"><table border="1">
    <tr>
        <th></th>
        <th>

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

HTML 構造

対応する HTML 構造には、row および .col の追加クラスが含まれています。それぞれ列ヘッダー:

出力例

セルの上にマウスを置くと、対応する行と列の両方が強調表示されます:

[画像行と列が強調表示されたテーブル]

このアプローチは、最新のブラウザーではシームレスに機能しますが、古いブラウザーでは正常に機能します。

以上がCSS ホバー効果を表のセルの境界を越えて拡張するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。