link button changes with CSS?
In simple term i would like to achieve something we have on stack overflow top navigator where the color of the button which is active is different BUT using CSS only NOT JavaScript ?
But the a:active does not seems to be working as expected. I saw some very common examples where this is done by assigning the class to active element in the markup from server or client side. Is that possible only using the CSS ?
<HTML>
<HEAD>
<TITLE>Its 开发者_如何学GoNav</TITLE>
<STYLE type="text/css">
div {
width:200;
}
ul {
list-style:none;
}
ul li a {
padding:2 4 2 4;
border:1px solid blue;
display:block;
text-decoration:none;
}
ul li a:active {
color:green;
}
ul li a:hover {
color:red;
}
ul li a:link {
color:gray;
}
</STYLE>
</HEAD>
<BODY>
<div>
<ul>
<li><a href="#" >link one</a></li>
<li><a href="#" >link two</a></li>
<li><a href="#" >link three</a></li>
<li><a href="#" >link four</a></li>
<li><a href="#" >link five</a></li>
<li><a href="#" >link six</a></li>
<li><a href="#" >link seven</a></li>
<li><a href="#" >link eight</a></li>
<li><a href="#" >link nine</a></li>
<li><a href="#" >link ten</a></li>
</ul>
<div>
</BODY>
</HTML>
If I understand what you want to do, using a:active won't help you. The css pseudo-class active shows when the link is clicked (exactly when it is clicked and before the next page loads). After that, it changes to visited.
Edit: I didn't see that you wanted an exclusively CSS solution first. I believe that what you need is something that has already been answered before. Check How to set a active link as default when page first time load an see if it helps :)
Since you don't want a JavaScript solution, I suggest creating a new class for the active <li> tag in your navigation bar. You can do that dynamically (for example with php) or manually for each page within the html.
As other people already commented, it'd be easier to give you an answer that you can apply directly, if you posted your code.
加载中,请稍侯......
精彩评论