Rumah > Artikel > hujung hadapan web > 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.
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!