Puis-je utiliser `col`, `colgroup` et CSS `:hover` pour mettre en évidence plus qu'une simple cellule de tableau ?

Col, colgroups et la pseudoclasse CSS "hover" peuvent-ils être utilisés pour plus qu'une simple cellule ?

Pour mettre en évidence les lignes du tableau et colonnes au survol de la souris, des pseudo-classes CSS comme ":hover" peuvent être utilisées. Mais que se passe-t-il si vous souhaitez mettre en évidence non seulement une seule cellule, mais une ligne ou une colonne entière, y compris les en-têtes ?

Une solution CSS pure peut y parvenir en utilisant les pseudo-éléments ::before et ::after. Ces éléments ajoutent du contenu avant et après l'élément sélectionné, respectivement. Voici comment procéder :

1. Créer des éléments de surbrillance :

   • Ajouter ::avant pour la mise en surbrillance des lignes et ::après pour la mise en surbrillance des colonnes après le éléments pertinents (par exemple, tr, td, th).
   • Utilisez le positionnement absolu pour permettre à ces éléments de s'étendre n'importe où.
   • Positionnez-les en dehors des limites de l'élément en utilisant des valeurs négatives pour gauche/haut ( : :avant) ou gauche/bas (::après).
   • Définissez une largeur/hauteur plus grande pour couvrir toute la ligne/colonne.

2. Masquer le débordement de surbrillance :

   • Empêchez les éléments de surbrillance de déborder de la table en définissant le débordement : caché sur la table.
   • Cela permet de garder la zone de la table propre tout en garantissant la surbrillance s'étend au-delà des cellules individuelles.

3. Ajouter des sélecteurs de ligne/colonne :

   • Pour mettre en surbrillance uniquement la ligne ou la colonne actuelle, utilisez les éléments ::before et ::after sur :hover th (en-têtes) et :hover .row / .col (sélecteurs basés sur les classes pour les lignes/colonnes).

Le code CSS ci-dessous implémente ces principes :

table { overflow: hidden; }
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>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th>
  </tr>
  <tr class="row">
    <th class="row">160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
  </tr>
  <tr class="row">
    <th class="row">165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</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; }

Le HTML reste en grande partie inchangé, mais inclut des noms de classe pour les lignes et les colonnes :

Cette solution fonctionne dans les navigateurs modernes, étendant l'effet de surbrillance sur des lignes et des colonnes entières avec élégance.

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!