CSSを使用してホバー時に表内の行と列を強調表示する方法

CSS を使用してカーソルを合わせたときに表の行と列を強調表示する

この質問では、ユーザーは行と列の両方を強調表示することを目的としています。 HTML テーブル内にマウスを移動します。ハイライトを一方の軸からもう一方の軸まで拡張し、ホバーしたセルで交差するようにしたいと考えています。

CSS ソリューション

これは、目的を達成する純粋な CSS ソリューションです。効果:

table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

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

td:hover::before,
.row:hover::before { 
    background-color: #ffa;
    content: '<pre class="brush:php;toolbar:false"><table>
    <tr>
        <th></th>
        <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>
    <tr>
        <th class="row">160cm</th>
        <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
    </tr>
    <tr>
        <th class="row">165cm</th>
        <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
    </tr>
    <tr>
        <th class="row">170cm</th>
        <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
    </tr>
    <tr>
        <th class="row">175cm</th>
        <td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
    </tr>
</table>

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; }

説明

この CSS は、擬似要素、絶対位置、Z インデックスの組み合わせを使用して、目的の効果を作成します。

• ::before および ::after 擬似要素は、ターゲット要素の前後に非表示のボックスを作成します(行と列)。
• 絶対配置により、これらのボックスは親要素の範囲を超えて拡張できます。
• z-index を -1 に設定すると、これらのボックスが実際のテーブル セルの下に配置されます。 、ユーザーへの干渉を防ぎます

HTML

対応する HTML マークアップは次のとおりです。

このマークアップでは、.row と . Col クラスは、通常の行や列と区別するためにテーブルのヘッダー要素に追加され、必要に応じて異なるスタイルを設定できるようになります。

このソリューションは、JavaScript や外部ライブラリを必要とせずに、ホバー時にテーブルの行と列を強調表示する柔軟なアプローチを提供します。

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