html - Bootstrap : How do I remove hover effect in 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>