html - 离开当前网站时重置悬停状态

Question

我有一个链接(样式为按钮):

<a href="http://externalsite" class="button" target="_blank">go to external site</a>

我将鼠标悬停在这个按钮类上，例如:

.button {
  background-color: green;
}

.button:hover {
  background-color: red;
}

到目前为止，没问题。我悬停按钮，它变成红色。我单击它并在新选项卡中打开一个新页面。当我回到我的网站时，悬停消失了，按钮又变绿了。但这只适用于某些浏览器!

在 chrome(我的版本 47.0.2526.80)中，我的按钮悬停在红色上，我单击外部页面，当我返回我的站点时，按钮仍然显示悬停的红色。只有当我移动光标时，悬停才会停用。就像不知何故悬停是粘性的。有没有人遇到过这个问题？这是浏览器错误吗？任何解决方法的想法？

Answer 1

使用焦点，它对我有用:)

这是一个代码笔

http://codepen.io/anon/pen/YwEvod

.button:focus {
  background-color: green;
}