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);
}

Answer 1

这是:not选择器的特定CSS选择器。它有good compatibility：

＆＃13;

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

＆＃13;

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

＆＃13;

我还建议你优先考虑focus事件，因为它比悬停状态更像＆＃34;静态＆＃34; ，有这样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

a:hover {
  color: magenta;
}

a:focus {
  color: cyan;
}

a:focus:hover {
  color: cyan;
}

＆＃13;

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

＆＃13;

简单来说：

每种状态都有一个规则（hover的洋红色和focus的青色），两者都有一个规则，给出了优先级（视觉效果））到focus状态：青色。

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

Answer 3

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

Answer 4

删除焦点上的边框：

.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

Answer 5

一种解决方案是在输入pointer-events: none时使用:focus声明：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;
}

当输入具有：focus时，不要触发：悬停样式

5 个答案: