Show mat-icon on hover

Question

I have mat-list in my html template:

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

I want to display mat-icon only on mat-list-item hover. So I come up with this css:

mat-icon {
  display: none;
}

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

But for some reason it is does not work

However if I do try to change the background color it is works:

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

It is probably something to do with mat-icon Thoughts?

@sreginogemoh why are you using the `+` sign. Use the child operator here `>` or just remove `+`. — Bhuwan, Jan 16 '19 at 08:37
:host::ng-deep mat-icon { display:block !important }.. try this — Biswajit Nath, Jan 16 '19 at 08:38
By default mat-icon has display property 'inline-block'. Probably you need to set it on hover instead of display 'block'. Issue can be because of the container with overflow:hidden, so when you use 'block' mat-icon goes down under previous block and is not visible. — Artem Arkhipov, Jan 16 '19 at 08:55

score 8 · Accepted Answer · answered Jan 16 '19 at 08:37

8

try this

mat-icon{
  display: none;
}

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

answered Jan 16 '19 at 08:37

Just code

How would you make sure that the `+` does not move the text to the right when it is displayed? – Sergino Jan 16 '19 at 08:42
2

@sreginogemoh use `visibility: hidden;` and `visibility: visible;` to preserve the space of plus icon – Just code Jan 16 '19 at 08:44

Md. Abu Sayed · Answer 2 · 2019-01-16T08:57:08.143

You can try this code here :

mat-icon{
  display: none;
}

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

OR

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

You tried the item:hover + children it's not currect, beacus the + selector is the imedite sibling selector, it's not select children.

I give the two code here

mat-list-item:hover mat-icon{ display: block; } that means any children inside the mat-list-item class select this.
and the other hand mat-list-item:hover > mat-icon{ display: block; } this means the children but it's select the direct children as like ul > li it's select directed children, not children children.

Thank you

score 0 · Answer 3 · answered Jan 16 '19 at 08:36

0

try this

  mat-icon {
      display: none;
    }

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

answered Jan 16 '19 at 08:36

Shailesh Ladumor

3 Answers3