Simulation :hover sur parent
On ne simule qu'un changement de la couleur de fond de la <tr> et éventuellement la bordure, mais pas plus.
Le rendu
| Colonne #1 | Colonne #2 | Colonne #3 | Colonne #4 |
|---|---|---|---|
| Col #1 Lig #1 | :hover |
Col #3 Lig #1 | Col #4 Lig #1 |
:hover |
Col #2 Lig #2 | Col #3 Lig #2 | Col #4 Lig #2 |
| Col #1 Lig #3 | Col #2 Lig #3 | :hover |
Col #4 Lig #3 |
| Col #1 Lig #4 | Col #2 Lig #4 | :hover |
Col #4 Lig #4 |
Quelques explications
Pour ne cibler que quelques éléments de la <table> nous utilisons, pour l'exemple, la structure HTML simplifiée suivante :
<td>
<p>:hover</p>
</td>
On va jouer avec le pseudo-élément :before de l'élément qui, survolé, doit déclencher le changement de couleur de fond de sa <tr> parent.
Ce pseudo-élément est déclaré en position:absolute et sera donc positionné par rapport à son premier parent lui même positionné, le grand classique.
Il nous faut donc déclarer les <tr> en position:relative pour qu'elles servent de référent, seulement voilà seul FireFox, à ce jour, reconnaît ce positionnement sur des éléments en display:table-xxxx et ce en dépit de la recommandation, voir Choosing a positioning scheme: 'position' property.
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
Il nous faut donc déclarer les <tr> en display:block, ou display:flex, ou encore changer la structure HTML mais le principe reste le même.
Le pseudo-élément :before est placé en arrière plan avec un z-index:-1 et fait la dimension du parent positionné. Il suffit de changer sa couleur de fond sur le :hover du parent direct et le tour est joué.
La <table> ne doit pas avoir de background-color.
Comme il n'y a plus de relation dimensionnelle entre les enfants des <tr>, il faut définir la largeur de ceux-ci.
Voir la discussion sur Developpez.com