当输入有 :focus 时，不要触发 :hover 样式答案

【问题标题】：When input has :focus, dont trigger :hover styles当输入有 :focus 时，不要触发 :hover 样式
【发布时间】：2017-07-26 02:47:38
【问题描述】：

我收到了一个输入，我用: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);
}

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

为此有一个特定的 CSS 选择器，:not 选择器。它有good compatibility:

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

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

&lt;a href="example.com"&gt;Stackoverflow&lt;/a&gt;

我还建议您优先考虑focus 事件，因为它比悬停状态更“静态”，如下所示：

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

a:focus {
  color: cyan;
}

&lt;a href="example.com"&gt;Stackoverflow&lt;/a&gt;

对于向后兼容的替代方案：

a:hover {
  color: magenta;
}

a:focus {
  color: cyan;
}

a:focus:hover {
  color: cyan;
}

&lt;a href="example.com"&gt;Stackoverflow&lt;/a&gt;

简单来说：

每个状态都有一个规则（hover 为 洋红色，focus 为青色），两者都有一个规则，优先（视觉上）@ 987654332@ 状态：青色。

【讨论】：

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

【解决方案2】：

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

.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 */;
}

【讨论】：

+1 用于替代的、向后兼容的解决方案。

【解决方案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

【讨论】：

【解决方案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;
}

【讨论】：

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

【解决方案5】：

快速破解：添加边框：solid 0px #FFFFFF 到 .form-control:focus

【讨论】：

你可能指的是边框宽度。