点击输入框后，CSS转换效果消失。

Question

将鼠标移到输入框上方。
看起来很不错，这正是我想要的效果。
现在 - 点击并按住一个输入框，看它如何变暗？
松开鼠标按钮并观察它如何立即恢复亮度。

我想通过点击行为来反转此过渡效果：
它应该立即变暗，并在释放鼠标点击后淡出到亮度。

仅使用CSS是否可能实现此目标，同时保留原始悬停效果？

input {
  background: #aa7fce;
  border: 1px solid #4857bb;
  color: #4857bb;
  height: 24px;
  box-sizing: border-box;
  transition: background 0.5s linear 0s;
}
input:hover,
input:focus {
  background: #E2C2FD;
  transition: none;
}
input:active {
  color: #E2C2FD;
  background: #4857bb;
  transition: background 0.5s linear 0s;
}

<input type="text">
<input type="button" value="go">
<br>
<br>
<input type="text" placeholder="name">
<br>
<input type="text" placeholder="address">
<br>
<input type="text" placeholder="phone">
<br>
<input type="text" placeholder="city">
<br>
<input type="text" placeholder="state">
<br>
<input type="text" placeholder="country">

- RozzA

Answer 1

在:active状态下添加transition: none，并从:focus中移除过渡效果。

input {
  background: #aa7fce;
  border: 1px solid #4857bb;
  color: #4857bb;
  height: 24px;
  box-sizing: border-box;
  transition: background 0.5s linear 0s;
}
input:hover,
input:focus {
  background: #E2C2FD;
}
input:active {
  color: #E2C2FD;
  background: #4857bb;
  transition: none;
}

<input type="text">
<input type="button" value="go">
<br>
<br>
<input type="text" placeholder="name">
<br>
<input type="text" placeholder="address">
<br>
<input type="text" placeholder="phone">
<br>
<input type="text" placeholder="city">
<br>
<input type="text" placeholder="state">
<br>
<input type="text" placeholder="country">

- Vucko

---

你在开玩笑吗？我已经尝试过这个了，而且它没有起作用。 - RozzA

@RozzA，你可能在input:hover, input:focus中保留了transition:none属性。 - Aziz

啊，你的编辑让我看到了我之前错过的地方。非常感谢！ - RozzA

@RozzA 是的，我忘了提到这一点。当您为元素添加某些过渡效果时，您会将该过渡效果应用于其所有状态（:active、:hover等）。因此，从:focus中删除transition:none意味着它将在焦点上使用主要的过渡效果。而在:active中添加transition:none则意味着您将覆盖主要的过渡效果。希望现在更清楚了 :) - Vucko

我仍然对过渡继承的工作原理感到困惑，但它确实有效！ - RozzA

@RozzA 这是一个简单的示例，演示了它的工作原理。干杯！ - Vucko