Discussion :

[CyberGomme]

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.

[psychadelic]

logiquement ce que tu as écrit devrait suffire.

ce serait mieux de voir le html généré plutôt que le code angular

tu as peut-être un conflit css qui empêche ce fonctionnement. ton code est trop partiel pour savoir, tu devrais utiliser le debugger pour voir ce qui se passe dans ta page.

[CyberGomme]

Salut psychadelic,

Le code HTML généré est le suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<mat-cell _ngcontent-c11="" class="mat-cell cdk-column-recurrence mat-column-recurrence ng-tns-c11-2 ng-star-inserted" role="gridcell">
     <div _ngcontent-c11="" class="recurrence-cell ng-tns-c11-2 ng-star-inserted" id="recurrent">
             <p _ngcontent-c11="" class="ng-tns-c11-2">r</p>
     </div>
</mat-cell>

Il est identique pour chacune des cellules crées respectant ma condition.
Le simple hover fonctionne sur la cellule voulue, mais guère sur l'ensemble des cellules souhaitées.

Peut-être que l'implémentation d'une fonction en typescript me serait nécessaire afin de toutes les sélectionner, je vais regarder ce que je peux faire de ce côté là.

[Invité]

Bonjour,

Mais quel "ensemble des cellules" ??
Ca veut dire quoi ?

Montre une copie d'écran...

[CyberGomme]

Par exemple sur cette image, j'ai 3 lignes dont 2 avec R.
Ce que je cherche à faire c'est, qu'en passant sur l'un des deux, les deux me déclenchent le hover correspondant.

[Invité]

Et en mettant la clase sur le <mat-cell ?
(je ne connais pas cette syntaxe)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
	<mat-cell *matCellDef="let visit" class="recurrence-cell">					
		<div *ngIf="isRecurrent(visit)">

[psychadelic]

c'est incomplet, quel est le code généré quand il n'y a pas de "R" à afficher ?

et le debugger indique aussi les règles css qui sont applicables pour ton élément, si ça se trouve tu as peut être une règle :empty pour cet élément ou son parent