1

我有一个这样的输入字段 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>.

有没有一种方法可以使悬停效果仅在输入没有焦点时起作用？

4

1 回答 1

2

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

使用您提供的代码，两者input:hover都input:focus具有011. 只要input:focus包含在 input:hover样式表之后，那么focus样式将始终覆盖:hover.

第一个 JSFiddle 演示。

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

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

第二个 JSFiddle 演示。

有了一个额外class的，:hover上面的选择器现在有一个特异性021并将覆盖:focus仍然具有较低特异性的选择器011。

确保您的:focus选择器具有更高的特异性，并且:hover当元素被聚焦时您将不适用。

于 2013-11-04T15:45:52.970 回答