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