伪类：active 在 Firefox 中无法正常工作答案

【问题标题】：Pseudo-class :active not working correctly in firefox伪类：active 在 Firefox 中无法正常工作
【发布时间】：2012-09-07 05:13:36
【问题描述】：

CSS：

a:link { color: green;}
a:active {color: orange;}

HTML：

<a href="#">testing</a>

Pseudo-class :active 在链接上单击鼠标按钮后仍然处于活动状态，拖走并释放。松开鼠标后如何使链接颜色恢复正常？

我使用的是 Firefox 14。它在 Chrome 中运行良好。

【问题讨论】：

【解决方案1】：

如果您在:focus:hover 上设置“活动”颜色，它将具有最接近您想要的效果，尽管它与 Chrome 中的颜色不完全相同，因为您设置的颜色将在链接出现时出现聚焦和悬停，但不是在鼠标按钮按下时。

但是，如果您最不喜欢的是释放鼠标后“活动”颜色仍然存在，您至少可以通过在:focus 上设置“正常”链接颜色来防止这种情况发生。该链接在被单击、拖出和释放后仍然保持焦点 - 您可以通过执行此操作然后按 Enter 来测试它。

您可以在this page 上找到示例（和信息） - 请注意按住并松开鼠标时的链接颜色；它们对应于该页面的a:hover、a:focus、a:focus:hover 和a:active 规则。

【讨论】：

http://jsfiddle.net/BMHUz/127/ 它不起作用，当我点击它时，链接保持相同的颜色。不过，它可以在 Chrome 中运行
啊，我明白了！您应该使用:focus:hover 作为“活动”颜色，并将您的“正常”颜色放在:focus 上。查看我链接的演示页面。我会更新我的答案。编辑：嗯，除了一个怪癖是链接会在悬停和聚焦时改变颜色，但是当鼠标按钮没有按下时。

【解决方案2】：

我会改为使用：a:hover:focus。悬停时获得新的背景颜色，单击（聚焦）时获得新的链接文本颜色。如果你只是向下点击链接，然后在点击之前将鼠标拉开，新的链接文本颜色会消失。

【讨论】：