By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,238 Members | 1,320 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,238 IT Pros & Developers. It's quick & easy.

css and active link

mickey0
100+
P: 142
Hello,
I did throuhg CSS a navigation menu. It seems fine; as you can see I set the 'current' page as 'active'. When I click on a link (button) the background changes colour. The problem is the the background of the 'activeLink' remains 'active'; How can I avoid this last? Can I do it by means of CSS or maybe do I need JS to accomplish this?
Thanks in advance
Expand|Select|Wrap|Line Numbers
  1. div#menu a:link, div#menu a:visited {     
  2.     background-color: #485e49;
  3.     color: #a2b3a1;
  4. }
  5. div#menu a:hover, div#menu a:focus, div#menu a:active {
  6.    color: White; 
  7.    text-decoration: none; 
  8.    background-color: #a2b3a1;   
  9. }
  10. div#menu a#activelink {
  11.      color: White; 
  12.      background-color: #a2b3a1; 
  13.      text-decoration: none 
  14. }
  15.  
  16.     <div id="menu">     
  17.             <a id="activelink" href="#">HOME</a>
  18.             <a href="#">CUSTOMERS</a>
  19.             <a href="#">NEWS</a>
  20.             <a href="#">ABOUT</a>
  21.     </div>    
  22.  
Oct 26 '11 #1
Share this Question
Share on Google+
4 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Without trying this, you may want to set #menu a:visited to the background color you want but remove that from the first line of your css.
Oct 26 '11 #2

mickey0
100+
P: 142
not sure of having understood what you mean; the point is that:
Expand|Select|Wrap|Line Numbers
  1. <a id="activelink" href="#">HOME</a>
  2.  
remains always active, even when I select another button (another <a>). How can I deselect it when I select another <a>?
hope clearer now.....
Oct 26 '11 #3

drhowarddrfine
Expert 5K+
P: 7,435
I may be confused with when you mean "active" and when you mean "visited". Active means when the user is clicking on the link. It may be "visited" that you want to be working with.

I just don't have time to look at it. Yes, it's possible javascript might be what you need.
Oct 26 '11 #4

P: 4
Your CSS needs
background-color: blue
OnMouseOver background-color: yellow
(The bit I think you have missed is)
OnMouseOut background-color: blue

You need to set the color back to your original color on mouse out.
Oct 26 '11 #5

Post your reply

Sign in to post your reply or Sign up for a free account.