3
votes

Afficher l'icône du tapis en survol

J'ai mat-list dans mon modèle html:

mat-list-item:hover {
  background-color: #3f51b5;
}

Je souhaite afficher mat-icon uniquement sur mat-list-item hover. Donc, je viens avec ce css:

mat-icon {
  display: none;
}

mat-list-item:hover + mat-icon {
  display: block;
}

Mais pour une raison quelconque, cela ne fonctionne pas

Cependant, si j'essaye de changer la couleur d'arrière-plan, il ça marche:

<mat-list *ngFor="let item of items">
  <mat-list-item><mat-icon>add</mat-icon> {{ item.title }}</mat-list-item>
</mat-list>

C'est probablement quelque chose à voir avec mat-icon Pensées?

angular css angular-material

5 commentaires

avez-vous essayé avec display: block! important?

@BiswajitNath vient de le faire, ne fonctionne toujours pas

@sreginogemoh pourquoi utilisez-vous le signe + . Utilisez l'opérateur enfant ici > ou supprimez simplement + .

: host :: ng-deep mat-icon {display: block! important} .. essayez ceci

Par défaut, mat-icon a la propriété d'affichage 'inline-block'. Vous devez probablement le mettre en survol au lieu d'afficher «bloquer». Le problème peut être dû au conteneur avec débordement: masqué, donc lorsque vous utilisez «bloc», l'icône du tapis descend sous le bloc précédent et n'est pas visible.

3 Réponses :

0
votes

essayez ceci

  mat-icon {
      display: none;
    }

    mat-list-item:hover > mat-icon {
      display: block;
    }

0 commentaires

5
votes

essayez ceci

mat-icon{
  display: none;
}

mat-list-item:hover mat-icon{
  display: block;
}

vous n'avez pas besoin de + sélecteurs adjacents

démo

2 commentaires

Comment vous assurez-vous que le + ne déplace pas le texte vers la droite lorsqu'il est affiché?

@sreginogemoh utilise visibilité: caché; et visibilité: visible; pour conserver l'espace de l'icône plus

0
votes

Vous pouvez essayer ce code ici:

mat-list-item:hover > mat-icon{ display: block; }

mat-icon{
  display: none;
}

mat-list-item:hover mat-icon{ display: block; }

Vous avez essayé le item: hover + children ce n'est pas courant, car le sélecteur + est le sélecteur imedite frère, il ne sélectionne pas les enfants.

I donnez les deux codes ici

mat-list-item: hover mat-icon {display: block; } cela signifie que tous les enfants de la classe mat-list-item sélectionnent ceci.
et d'autre part mat-list-item: hover> mat-icon {display: block; } cela signifie les enfants mais c'est sélectionner les enfants directs comme ul> li c'est sélectionner les enfants dirigés, pas les enfants enfants.

c'est le concept du sélecteur CSS Pour en savoir plus sur les sélecteurs CSS: https://www.w3schools.com/cssref/css_selectors. asp ou https://www.w3schools.com/cssref/trysel.asp p>

Merci

0 commentaires