Bagaimana untuk Memanjangkan Kesan Hover CSS Melangkaui Sempadan Sel dalam Jadual?

Memperluaskan Kesan Hover CSS Melangkaui Sempadan Sel: Menyerlahkan Jadual dalam Cols, Colgroups

Apabila memaparkan data dalam bentuk jadual, menyerlahkan sel tertentu pada hover selalunya diingini. Walau bagaimanapun, menyerlahkan baris dan lajur yang bersilang dengan sel berlegar boleh meningkatkan lagi kejelasan data. Ini amat berguna apabila jadual merangkumi berbilang unit ukuran.

Penyelesaian CSS Tulen

Mujurlah, mencapai kesan penyerlahan lanjutan ini boleh dilakukan dengan CSS tulen. Dengan menggunakan unsur pseudo (::sebelum, ::selepas), manipulasi indeks-z dan kedudukan mutlak, kami boleh mencipta tindanan serlahan yang melangkaui sempadan sel.

Pelaksanaan

Kod CSS berikut menggambarkan pelaksanaan:

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

Struktur HTML

Struktur HTML yang sepadan termasuk kelas tambahan .row dan .col untuk pengepala baris dan lajur, masing-masing:

Contoh Output

Melayang di atas sel kini menyerlahkan kedua-dua baris dan lajur yang sepadan:

[Imej jadual dengan baris dan lajur yang diserlahkan]

Pendekatan ini berfungsi dengan lancar dalam penyemak imbas moden dan merosot dengan anggun dalam penyemak imbas lama.

Atas ialah kandungan terperinci Bagaimana untuk Memanjangkan Kesan Hover CSS Melangkaui Sempadan Sel dalam Jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!