Rumah >hujung hadapan web >tutorial css >Bagaimanakah saya boleh menyerlahkan kedua-dua baris dan lajur jadual pada tuding menggunakan CSS sahaja?
Bagaimanakah saya boleh menyerlahkan kedua-dua baris dan lajur jadual pada tuding menggunakan CSS sahaja?
- DDDasal
- 2024-11-07 14:53:03567semak imbas
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
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!