Bonjour à tous,

Je réalise aujourd'hui une application web en employant angular5/6 et typescript 2.X, mais viens vous voir pour une petite question CSS.

J'ai un <mat-table> dont l'une des colonnes est remplie de la manière suivante :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<ng-container matColumnDef="recurrence">
	<mat-header-cell *matHeaderCellDef i18n> Recurrence </mat-header-cell>
	<mat-cell *matCellDef="let visit">					
		<div *ngIf="isRecurrent(visit)" class="recurrence-cell">
			<p>r</p>
		</div>
	</mat-cell>
</ng-container>

Pour ceux qui n'utilisent pas angular, j'ai une colonne dans laquelle les cellules contiennent soit une div contenant 'r' si ma condition est respectée, soit une case vide dans le cas contraire.

Je souhaite que, lorsque l'utilisateur déplace sa souris sur l'élément en question, toutes les cases contenant ma div déclenchent un hover.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
.recurrence-cell:hover {
	background-color: rgb(48, 195, 158);
}
Toutefois ce simple code déclenche le hover uniquement sur l'élement concerné (normal, après tout c'est ici ce qui est demandé).

Est-ce que ceci est possible en CSS ou est-ce que je dois passer par l'intermédiaire d'une petite fonction typescript dans laquelle je déclencherai manuellement le hover sur toutes les cases souhaitées.


En attendant votre réponse je vais chercher quelques solutions envisageable.

Merci d'avance à tous,
CyberGomme.