简体   繁体   中英

CSS a:active pseudo class not Working

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 Stackoverflow 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.

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM