所有文本在悬停时不改变颜色

Question

当 af-notification__content div 悬停时，标题 (af-notification__title)、说明 (af-notification__description) 和日期 (af-notification__date) 文本颜色应变为黑色。

我在内容 div 中添加了“颜色：黑色”

 .af-notification__content :hover {
    color: black;
    background-color: #dfeaed;
  }

<div class="af-notification" *ngFor="let item of items; let i = index" [class.toggled]="toggled">
  <div class="af-notification__content"  [class.delete]="delete">
    <button (click)="deleteWidget(i)" class="btn-close">delete</button>
    <span class="af-notification__title" [class.read]="item['read'] == true">{{ item['title'] }}</span>
    <span class="af-notification__description">{{ item['description'] }}</span>
    <span class="af-notification__date">
      {{ item['date'] }} {{ item['time'] }}
    </span>
  </div>
</div>

https://stackblitz.com/edit/angular-9quulu

如果我将鼠标悬停在 af-notification__content div 上，所有文本都应变为黑色。目前，只有将鼠标悬停在每个单独的文本范围上时，文本才会变为黑色。 在这种情况下使用 ::ng deep 会是一个不错的选择吗？

Answer 1

这对我有用：

.af-notification:hover .af-notification__title,
.af-notification:hover   .af-notification__date-time {
    color: black;
    background-color: #dfeaed;
  }

https://stackblitz.com/edit/angular-vuvwzw?file=src/app/notification/notification.component.css

Answer 2

删除“悬停”之前的空格。悬停前不能有空间。试试下面的代码。

.af-notification__content:hover{
color: black;
background-color: #dfeaed;
}