Question

我的html模板中有mat-list：

<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;
}

Answer 2

尝试

  mat-icon {
      display: none;
    }

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

Answer 3

您可以在此处尝试此代码：

mat-icon{
  display: none;
}

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

OR

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

您尝试了 item：hover +个孩子，它不是当前选项，因为+选择器是imedite兄弟选择器，它不是选择孩子。

我在这里给出两个代码

mat-list-item:hover mat-icon{ display: block; } ，这意味着 mat-list-item 类中的所有子级都会选择它。
和另一方面 mat-list-item:hover > mat-icon{ display: block; } 的意思是孩子，但是它选择了直接孩子，就像ul> li一样，它选择了定向孩子，而不是孩子孩子。

谢谢