Comment puis-je mettre en surbrillance les lignes et les colonnes du tableau en survol en utilisant uniquement CSS ?

Mise en surbrillance des lignes et des colonnes du tableau au survol à l'aide de la pseudoclasse CSS "Hover"

Dans ce scénario, mettre en surbrillance à la fois la ligne et la colonne du tableau au survol est possible en utilisant des éléments sémantiques comme et . Explorons une méthode CSS pure :

Utilisation de pseudo-éléments pour la mise en évidence

Pour mettre en évidence la ligne et la colonne, nous utilisons les pseudo- ::before et ::after éléments. Ceux-ci créent des éléments virtuels positionnés de manière absolue qui existent en dehors du flux du document :

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

• le survol de td ou .row déclenche la mise en surbrillance de la ligne entière.
• td ou .col le survol déclenche la mise en surbrillance de la colonne entière.
• z-index : -1 place les surlignages sous les cellules de données du tableau.
• position : les dimensions absolues et extrêmement grandes permettent aux surlignages de s'étendre au-delà des limites des cellules.
• débordement : caché sur la table masque tout débordement.

Classes CSS pour la spécificité

Dans le HTML, nous ajoutons des classes comme . row et .col pour spécifier clairement l'élément cible :

Conclusion

Cette solution met en évidence à la fois les lignes et les colonnes au survol en utilisant uniquement CSS et ne s'appuie pas sur JavaScript ou jQuery. Il fonctionne dans tous les navigateurs modernes et se dégrade gracieusement dans les anciens navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!