Bootstrap：如何在CSS中删除悬停效果？

Question

我在我的网站上使用bootstrap，其链接打开了一个新标签。在我的桌面浏览器中，关闭选项卡后，链接保持聚焦（红色）（不在窗口中移动我的鼠标指针）。

我添加了onclick="this.blur()以移除焦点（红色），但hover仍然有效（绿色）。

如何删除焦点和悬停？

CSS文件：

a {
  color:black;
}
a:hover {
  color:green;
}
a:focus {
  color:red;
}

HTML文件：

<a href="https://www.google.com" target="_blank" onclick="this.blur();">google</a> 

Answer 1

只需使用与链接相同的颜色在CSS中覆盖它，

a, a:hover, a:focus{
  color:black;
}

如果需要，您也可以覆盖:visited和:active

a, a:hover, a:visited, a:active, a:focus{
  color:black;
}

这是一个片段

a,
a:hover,
a:visited,
a:active,
a:focus {
  color: black !important;
}

/*important used for demo only*/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a href="https://www.google.com" target="_blank">google</a>

Answer 2

使用此：

a:active, visited {
  color:black;
}

active是您点击后链接所具有的状态。在这种情况下，你不会失去悬停效果。