只有当<input />没有焦点时，如何才能使<input />悬停CSS工作？

Question

我有一个像这样的输入字段CSS：

input {
   background: white;
   border: 1px solid #bbb;
   box-shadow: none;
}

input:hover {
   background: white;
   border: 1px solid #999;
   outline: none;
   box-shadow: none;
 }

input:focus {
   outline: none;
   box-shadow: none;
   border: 1px solid #555;
}

我的问题是，当我给出输入焦点时，如果我的光标也在<input>上方，则悬停效果会接管。

有没有办法只在输入没有焦点时才能使悬停效果有效？

Answer 1

使用您提供的代码，我无法重现该问题，这使我相信这是特异性问题。 （如果你不确定那是什么，我今天早些时候写了一篇关于特异性的博客文章： What the heck is specificity? ）

使用您提供的代码，input:hover和input:focus都具有011的特异性。只要在样式表中 input:focus之后包含，input:hover，focus样式将始终覆盖:hover。

First JSFiddle demo

如果您的:hover有一个额外的选择器，其特异性将高于:focus选择器。例如：

input.example:hover { ... }
input:focus { ... }

Second JSFiddle demo

使用额外的class，上面的:hover选择器现在具有021的特异性，并将覆盖:focus选择器，该选择器的特异性仍然较低{{1} }}

确保您的011选择器具有更高的特异性，并且在关注元素时，:focus将不适用。