CSS a：主动伪类不工作

I know this question has been asked here before and I've done some googling to see if i could get it to work but the solutions I find don't at all work for me. Here's my code

我知道之前已经问过这个问题,我已经做了一些谷歌搜索,看看我是否可以让它工作,但我找到的解决方案对我来说根本不起作用。这是我的代码

<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;
}

I want when I click a link and hover out of it the background on the a:active should change take for Instance * here if you scroll to the top you would see options like Questions,Tags,Users,Badges if i click on each of those links the background changes to Orange. I want something like that. Thanks.

我想当我点击一个链接并将其悬停在它上面时a:活动应该更改为实例*在这里滚动到顶部你会看到问题,标签,用户,徽章,如果我点击每个那些链接背景更改为橙色。我想要那样的东西。谢谢。

2 个解决方案

#1

Your code is working fine. You can see here when i switch it to red, when you hold the mouse click down it works correctly.

你的代码工作正常。你可以在这里看到我将它切换为红色,当你按住鼠标点击它可以正常工作。

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

only changed the red here for clarity

为清晰起见,这里只改变了红色

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

#2

You chosen very close colors: #efefef and #eaeaea, that's why difference is hard to see.

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

#1