Bagaimanakah saya boleh menyerlahkan kedua-dua baris dan lajur jadual pada tuding menggunakan CSS sahaja?

Menyerlahkan Baris dan Lajur Jadual pada Tuding Menggunakan Kelas Pseudo "Hover" CSS

Dalam senario ini, menyerlahkan kedua-dua baris dan lajur jadual pada tuding adalah mungkin menggunakan unsur semantik seperti dan . Mari kita teroka kaedah CSS tulen:

Menggunakan Elemen Pseudo untuk Menyerlahkan

Untuk menyerlahkan baris dan lajur, kami menggunakan pseudo- ::sebelum dan ::selepas elemen. Ini mencipta elemen maya diposisikan secara mutlak yang wujud di luar aliran dokumen:

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 atau .row sedang dilegar mencetuskan penonjolan keseluruhan baris.
• td atau .col dilegar mencetuskan penonjolan keseluruhan lajur.
• z-index: -1 meletakkan serlahan di bawah sel data jadual.
• kedudukan: dimensi mutlak dan sangat besar membenarkan sorotan melangkaui sempadan sel.
• limpahan: tersembunyi di atas meja menyembunyikan sebarang limpahan.

Kelas CSS untuk Kekhususan

Dalam HTML, kami menambah kelas seperti . baris dan .col untuk menentukan elemen sasaran dengan jelas:

Kesimpulan

Penyelesaian ini menyerlahkan kedua-dua baris dan lajur pada tuding semata-mata menggunakan CSS dan tidak bergantung pada JavaScript atau jQuery. Ia berfungsi dalam semua penyemak imbas moden dan merosot dengan anggun dalam penyemak imbas lama.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menyerlahkan kedua-dua baris dan lajur jadual pada tuding menggunakan CSS sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!