当输入具有:focus时,不要触发:悬停样式

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

这个选择器有一个特定的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>

简单来说:

你必须为每个国家(通常红色的hover和蓝绿色的focus)和一个两个,优先(视觉)的focus状态:青色.

Answer 2

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