input input - 4 months ago 19
CSS Question

hyperlink tag active state not working

whenever i've tried using the hyperlink/anchor tag active state, it doesn't work. even if i click on the link, it should show it as in active state, but there's no effect. is there something i'm missing?

this is a basic example-


<li><a class="main" href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">RSS Feed</a></li>




#navigation ul li a:hover, #navigation ul li a:focus, #navigation ul li a:active {
color: #FFF;
border: 1px solid #B20000;
border-top: 2px solid #B20000;
padding: 15px 6px 6px 6px;
background: #660000;
-moz-transition: color 1s ease;
-o-transition: color 1s ease;
-webkit-transition: color 1s ease;
transition: color 1s ease;
text-shadow: 0 0 0.2em #D5E3E7, 0 0 0.2em #D5E3E7;



To achieve your desired effect, you should pass a site-wise variable containing value of which link is active, and on page load, retrieve the variable, compare with navigational links and if they match, then apply active class or something.

For css :active is used for showing link which is pushed at the exact moment, not which link is active site-wise.

Can be easily achieved with server-side languages (like PHP), but I have no idea if it can be achieved with client-side languages (like JavaScript), if so, I'd love to see an answer about it too.