css and active link

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • mickey0
    New Member
    • Jan 2008
    • 142

    css and active link

    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
    Code:
    div#menu a:link, div#menu a:visited { 	
    	background-color: #485e49;
    	color: #a2b3a1;
    }
    div#menu a:hover, div#menu a:focus, div#menu a:active {
       color: White; 
       text-decoration: none; 
       background-color: #a2b3a1;   
    }
    div#menu a#activelink {
         color: White; 
         background-color: #a2b3a1; 
         text-decoration: none 
    }
    
        <div id="menu">     
                <a id="activelink" href="#">HOME</a>
                <a href="#">CUSTOMERS</a>
                <a href="#">NEWS</a>
                <a href="#">ABOUT</a>
        </div>
  • drhowarddrfine
    Recognized Expert Expert
    • Sep 2006
    • 7434

    #2
    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.

    Comment

    • mickey0
      New Member
      • Jan 2008
      • 142

      #3
      not sure of having understood what you mean; the point is that:
      Code:
      <a id="activelink" href="#">HOME</a>
      remains always active, even when I select another button (another <a>). How can I deselect it when I select another <a>?
      hope clearer now.....

      Comment

      • drhowarddrfine
        Recognized Expert Expert
        • Sep 2006
        • 7434

        #4
        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.

        Comment

        • Garry
          New Member
          • Oct 2011
          • 4

          #5
          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.

          Comment

          Working...