在悬停时显示垫图标

Question

我mat-list在我的HTML模板：

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

我只想mat-icon在mat-list-item悬停时显示。所以我想出了这个css：

mat-icon {
  display: none;
}

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

但由于某种原因它不起作用

但是，如果我确实尝试更改背景颜色，它是有效的：

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

这可能与mat-icon 思想有关？

Answer 1

尝试这个

mat-icon{
  display: none;
}

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

你不需要 + adjacent selectors

演示