当输入框处于:focus状态时，不要触发:hover样式。

Question

我得到了一个输入框，我用:focus和:hover对其进行了样式设计。当输入框被:focus选中时，我不想让鼠标悬停在输入框上时触发:hover样式。

我该如何设计样式呢？

我的CSS代码如下：

.form-control:hover {
   border-color: #a9a9a9;
}

.form-control:focus {
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6);
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6);
}

- guidsen

Answer 1

有一个专门用于此的CSS选择器，即:not选择器。它具有良好的兼容性：

a:hover:not(:focus) {
  color: magenta;
}

a:focus:not(:hover) {
  color: cyan;
}

<a href="example.com">Stackoverflow</a>

我建议您优先考虑focus事件，因为它比悬停状态更加静态，可以这样使用：

a:hover:not(:focus) {
  color: magenta;
}

a:focus {
  color: cyan;
}

<a href="example.com">Stackoverflow</a>

并且，还有一个向后兼容的替代方案：

a:hover {
  color: magenta;
}

a:focus {
  color: cyan;
}

a:focus:hover {
  color: cyan;
}

<a href="example.com">Stackoverflow</a>

简单来说：

你有一个规则用于每个状态（magenta 代表 hover，cyan 代表 focus），以及一个同时适用于两种状态的规则，优先（视觉上）使用 focus 状态的规则：cyan。

- arielnmz

---

“向后兼容的替代方案”效果非常好，谢谢！ - Davbog

Answer 2

只需在您的:hover规则中添加:not(:focus)即可，如下所示：

:not(:focus)。

.form-control:hover:not(:focus) {
   border-color: #a9a9a9;
}

如果浏览器支持成为问题（因为IE8及以下版本不支持:not()），你可能需要编写一个新规则来结合:hover和:focus，以硬编码颜色值来覆盖:hover规则（因为border-color的初始值currentColor也不受IE8及以下版本的支持）。

.form-control:hover {
   border-color: #a9a9a9;
}

.form-control:hover:focus {
   border-color: /* Default border color depending on your layout */;
}

- BoltClock

---

对于这个替代方案，向后兼容，我给出+1。 - arielnmz

Answer 3

移除焦点时的边框效果：

.form-control:hover {
    border-color: #a9a9a9;
}
.form-control:focus {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(102, 175, 233, 0.6);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(102, 175, 233, 0.6);
    border: none;
}

或者在焦点状态下将边框设置为透明，以避免表单“跳动”。

.form-control:hover {
    border-color: #a9a9a9;
}
.form-control:focus {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(102, 175, 233, 0.6);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 2px rgba(102, 175, 233, 0.6);
    border-color: rgba(0, 0, 0, 0);
}

请看这里：http://codepen.io/TheNathanG/pen/eCtiu

- NathanG

Answer 4

一个解决方案是在输入框具有 :focus 时使用pointer-events: none 声明：http://jsfiddle.net/kbLP9/。

.form-control:focus {
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6);
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6);
   pointer-events: none;
}

另一种解决方案是结合伪类:focus和:hover来实现所需的效果：http://jsfiddle.net/7LbNV/。

.form-control:focus:hover {
    border-color: initial;
}

- DRD

---

我强烈建议不要仅仅使用 pointer-events 来防止在表单字段和其他元素上出现悬停效果，因为用户希望能够以除了悬停之外的其他方式使用鼠标与它们进行交互。border-color: initial 可以替换为 border-color: currentColor，以获得更好的浏览器兼容性。 - BoltClock

Answer 5

快速技巧：在 .form-control:focus 中添加边框：solid 0px #FFFFFF

- ml242

---

您可能是想说border-width。 - BoltClock