Bagaimana untuk Menyerlahkan Baris dan Lajur dalam Jadual pada Hover Menggunakan CSS?

Menyerlahkan Baris dan Lajur dalam Jadual pada Tuding Menggunakan CSS

Dalam soalan ini, pengguna bertujuan untuk menyerlahkan kedua-dua baris dan lajur pada tuding dalam jadual HTML. Mereka mahu sorotan dilanjutkan dari satu paksi ke paksi yang lain, bersilang pada sel yang dilegar.

Penyelesaian CSS

Berikut ialah penyelesaian CSS tulen yang mencapai yang diingini kesan:

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

Penjelasan

CSS ini menggunakan gabungan unsur pseudo, kedudukan mutlak dan pengindeksan z untuk mencipta kesan yang diingini.

• Elemen ::sebelum dan ::selepas pseudo-elemen mencipta kotak yang tidak kelihatan sebelum dan selepas elemen sasaran (baris dan lajur).
• Kedudukan mutlak membolehkan kotak ini melangkaui batasan elemen induknya.
• Menetapkan indeks-z kepada -1 memastikan kotak ini berada di bawah sel jadual sebenar , menghalang mereka daripada mengganggu pengguna interaksi.

HTML

Penanda HTML yang sepadan adalah seperti berikut:

Dalam penanda ini, .row dan . kelas kol ditambah pada elemen pengepala jadual untuk membezakannya daripada baris dan lajur biasa, membolehkan penggayaan berbeza jika dikehendaki.

Penyelesaian ini menawarkan pendekatan yang fleksibel untuk menyerlahkan baris dan lajur jadual pada tuding, tanpa memerlukan JavaScript atau mana-mana perpustakaan luaran.

Atas ialah kandungan terperinci Bagaimana untuk Menyerlahkan Baris dan Lajur dalam Jadual pada Hover Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!