javascript - 向输入添加样式，但仅在悬停和不活动时

Question

有没有一种方法可以在我的输入悬停且未激活时使用条件语句将样式应用于我的输入？

用例:

• 未悬停:背景 = 白色(或未应用任何样式)
• 悬停且不事件:背景 = 浅灰色
• 悬停且处于事件状态:背景 = 白色(或未应用任何样式)

我正在考虑 Angular 中可用的输入的各种属性，例如 dirty、touched 等...，但我不确定如何将它们用于这种效果？

任何指针都会很棒。

这是一个stackblitz使用示例 html

// This can be used by [ngClass]
.grey {
  background: lightgrey;
}

input:hover {
  background: lightgrey
}

<form [formGroup]="myForm" (submit)=submit()>
  <input formControlName="myInput" type="text">
</form>

Answer 1

使用 :not 属性，这个工作片段可能对您有所帮助。

.test:hover:not(:focus)
{
 background: #D3D3D3;
}

<input type="text" class="test" />