不要应用从焦点到模糊的CSS过渡

Question

如果提出这个问题，请道歉;我尝试了很多不同的措辞试图找到答案，但无济于事！

基本上我在输入上使用CSS转换（仅适用于border-color）。

当鼠标悬停或悬停时，我希望应用转换。 当聚焦和非聚焦时，我希望CSS是即时的（即没有转换持续时间）。

到目前为止，我的悬停工作正常，焦点的模糊是即时的，但模糊的焦点是过渡属性。

目前我的代码如下：

input{
  border:1px solid #444444;
  transition:border-color 1s;
}
input:hover{ border-color:#666666; transition:border-color 1s; }
input:focus{ border-color:#D26D22; transition:none; }`

我知道我可以轻松地使用JQuery做到这一点，但如果可能的话，我想要一个CSS解决方案，谢谢。

编辑：小提琴在此显示https://jsfiddle.net/xamy95uv/

Answer 1

您可以使用input:not(:focus){transition:none}