Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts

    Link hover reset.

    Hey everyone. One a link/internal page has been visited through a hyperlink, is there a way to reset the values so that the hover values show up again, instead all the visited links staying in the visited state? It's visually displeasing when some of the links still display the hover state while others do not. Any help is greatly appreciated.

    Here is my simple css code for all the hyperlinks:

    Code:
    a:link {color:#0000CB; text-decoration:none;}
    a:hover {color:#999999; text-decoration:underline;}
    a:active {color:#3333ff; text-decoration:none;}
    a:visited {color:#0000CB; text-decoration:none;}

  • #2
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Add another line that says

    Code:
    a:visited:hover {color:#999999; text-decoration:underline;}

  • Users who have thanked GardenGnome2 for this post:

    optimus203 (12-01-2008)

  • #3
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Perfect! I didn't know you could do that. Thanks Garden Gnome. I really appreciate it.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by optimus203 View Post
    Perfect!
    You could have also just changed the order of your style rules. :visited is overriding :hover because it appears later in the style sheet; putting :hover after visited will cause :hover styles to take precedence.

    You could also shorten your code a bit; the following code should do pretty much the same thing.

    Code:
    a {color: #0000cb; text-decoration: none; }
    a:hover { color: #999; text-decoration: underline; }
    a:active { color: #33f; text-decoration: none; }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Links MUST be in correct order:

    a:link {color:#0000CB; text-decoration:none;}
    a:visited {color:#0000CB; text-decoration:none;}
    a:hover {color:#999999; text-decoration:underline;}
    a:active {color:#3333ff; text-decoration:none;}

    link | visited | hover | active
    ☠ ☠RON☠ ☠

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by Major Payne View Post
    Links MUST be in correct order:
    Well, no, they mustn't, but that's the way to do it so they don't override each other in a displeasing fashion.

    *opens bag of coder tricks* There's a little mnemonic some like to use: love hate (you can see the gangster's fingers right now)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •