CSS a:active pseudo class not Working

Question

我知道这个问题以前在这里被问过，我已经做了一些谷歌搜索，看看我是否可以让它工作，但我找到的解决方案根本不适合我。这是我的代码

<div id="rightbar" class="float-r">
        <table width="100%" cellpadding="0" cellspacing="0">
        <tbody><tr>
            <td colspan="2"><a class="block active" href="dashboard.php">My Dashboard</a></td>
        </tr>           
        <tr>
            <td><a class="block" href="profile.php">My Profile</a></td>             
        </tr>           
        <tr>
            <td><a class="block" href="edit_profile.php">Edit Personal Details Form</a></td>                
        </tr>
        <tr>
            <td><a class="block" href="edit_form.php">Edit Members Form</a></td>                
        </tr>
        <tr>
            <td colspan="2" class="last-child"><a style="border-bottom:solid 1px #eaeaea;width:235px;" class="block" href="logout.php">Log Out</a></td>             
        </tr>
        </tbody></table>
    </div>
.float-r {
 float: right;
}
#rightbar {
background: #ffffff;
float: right;
width: 250px;
margin-top: 10px;
height: 530px;
margin-right: 10px; 
border-bottom: solid 1px #c8c9c9;
}
#rightbar a {
width:235px;
color: #000;
font-size:14px;
text-decoration:none;
}
#rightbar a:hover{
background-color:#efefef;
width:235px;
}
#rightbar a:active{
background-color:#eaeaea;
width:235px;
}

我希望当我单击一个链接并将鼠标悬停在它之外时，a：active 上的背景应该改变 Instance Stackoverflow 在这里，如果您滚动到顶部，您将看到问题、标签、用户、徽章等选项，如果我单击每个链接，背景将更改为橙色。我想要这样的东西。谢谢。

Answer 1

您的代码工作正常。当我将其切换为红色时，您可以在此处看到，当您按住鼠标单击时，它可以正常工作。

https://jsfiddle.net/zk3sw43m/2/

为了清楚起见，这里只更改了红色

 #rightbar a:active{
background-color:red;
width:235px;
}

Answer 2

你选择了非常接近的颜色：#efefef 和 #eaeaea，这就是为什么很难看到差异。