强制 CSS 样式按钮“悬停”（仅限 Firefox）

Question

我有链接

<a href="http://someplace.com/url.htm" class="button">CLICK HERE</a>

由这个 CSS 样式化

.button{
    text-decoration:none; text-align:center; 
    padding:10px 0px; 
    border:solid 1px #000000;
    font:14px Arial, Helvetica, sans-serif; 
    font-weight:bold; 
    color:#2b2b2b; 
    background-color:#D6E7F6; 
    display: inline-block;
    width:25%
}
.button:hover{
    background-color:#77AEDC; 
    color:#2b2b2b; 
}
.button:active{
}

当我将鼠标悬停在按钮上时，它会正确更改颜色。 当我单击链接时，它会打开正确的链接。 当我点击浏览器后退按钮时，按钮颜色仍然是悬停颜色。

当页面重新加载时，如何让按钮全部“取消悬停”？ 这只是 Firefox（PC 和 Android 版本）中的问题。

这是一个显示问题的示例网站

http://www.filedropper.com/websitetest_1

如果您下载并将其解压缩到一个文件夹中，您可以使用 firefox 打开 htm 并查看问题。

这是显示我的意思的屏幕截图。单击后退按钮时，我希望第一个按钮不处于悬停状态。

http://www.filedropper.com/example_2

添加访问，即

.button{
    text-decoration:none; text-align:center; 
    padding:10px 0px; 
    border:solid 1px #000000;
    font:14px Arial, Helvetica, sans-serif; 
    font-weight:bold; 
    color:#2b2b2b; 
    background-color:#D6E7F6; 
    display: inline-block;
    width:25%
}
.button:visited{
    color:#2b2b2b; 
    background-color:#D6E7F6; 
}
.button:hover{
    background-color:#77AEDC; 
    color:#2b2b2b; 
}
.button:active{
}

没有帮助。单击 Firefox 后退按钮仍然会保留悬停状态按钮。还有一个副作用是禁用任何已经访问过的按钮的悬停。

希望一切都清楚。

感谢任何提示。

Answer 1

试试这个：

a.button:visited{
  background-color:#77AEDC; 
  color:#2b2b2b; 
}