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
    Zeb
    Zeb is offline
    New Coder
    Join Date
    Oct 2005
    Location
    Devon, UK
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Different hover states for links on same page

    I've tried using the search facility but can't seem to find exactly what I'm looking for.

    The site I'm making has a menu on the left and the main area on the right and no frames are used. What I'd like to do is be able to have different colors used in the hover states for the menu to the rest of the site.

    Here is some of my CSS:
    Code:
    a:link {color: #e0ffe0; text-decoration: none;}
    a:active {color: #80ff80; text-decoration: none;}
    a:visited {color: #e0ffe0; text-decoration: none;}
    a:hover {color: #40ff40; text-decoration: none;}
    Many thanks in advance.
    I wanted to change the world but God wouldn't give me the source code :'(

  • #2
    Zeb
    Zeb is offline
    New Coder
    Join Date
    Oct 2005
    Location
    Devon, UK
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sod's law I post this request after spending ages trying to figure out and now I've gone and done it by accident!

    Code:
    a:link {color: #e0ffe0; text-decoration: none;}
    a:active {color: #80ff80; text-decoration: none;}
    a:visited {color: #e0ffe0; text-decoration: none;}
    a:hover {color: #40ff40; text-decoration: none;}
    a.menu:link {font: 10px verdana; color: #e0ffe0; text-decoration: none;}
    a.menu:active {font: 10px verdana; color: #80ff80; text-decoration: none;}
    a.menu:visited {font: 10px verdana; color: #e0ffe0; text-decoration: none;}
    a.menu:hover {font: 10px verdana; color: #40ff40; text-decoration: none;}
    a.admin:link {font: 10px verdana; color: #ff8080; text-decoration: none;}
    a.admin:active {font: 10px verdana; color: #ff0000; text-decoration: none;}
    a.admin:visited {font: 10px verdana; color: #ff8080; text-decoration: none;}
    a.admin:hover {font: 10px verdana; color: #ff4040; text-decoration: none;}
    a.player:link {font: 10px verdana; color: #e0ffe0; text-decoration: none;}
    a.player:active {font: 10px verdana; color: #80ff80; text-decoration: none;}
    a.player:visited {font: 10px verdana; color: #e0ffe0; text-decoration: none;}
    a.player:hover {font: 10px verdana; color: #40ff40; text-decoration: none;}
    I just use class="xxx" for whever set of colors I want to use for the link.

    Thought I'd post that just in case anyone else was having a similar problem.
    I wanted to change the world but God wouldn't give me the source code :'(

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Fwiw, you should try to order your pseudo-classes as a:link, a:visited, a:hover, a:active as some browsers will fail to implement some states if that order is not used.

    Additionally, you may wish to add :focus pseudo-class to the list as it is particularly useful to those who use keyboards to navigate around websites and for whom the :hover state is redundant.
    If you do add it (and you probably should), then the best place to put it would seem to be between the hover and active states.

    e.g.
    Code:
    a:link {
    …
    }
    
    a:visited {
    …
    }
    
    a:hover {
    …
    }
    
    a:focus {
    …
    }
    
    a:active {
    …
    }

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Properties, selector

    And, since there are always more ways to reach the same point, you can simplify this:
    Code:
    a.player:link {font: 10px verdana; color: #e0ffe0; text-decoration: none;}
    a.player:active {font: 10px verdana; color: #80ff80; text-decoration: none;}
    a.player:visited {font: 10px verdana; color: #e0ffe0; text-decoration: none;}
    a.player:hover {font: 10px verdana; color: #40ff40; text-decoration: none;}
    by this:
    Code:
    a.player {font: 10px verdana; color: ???; text-decoration: none;} //supply base link color here
    a.player:visited {color: #e0ffe0;}
    a.player:hover {color: #40ff40;}
    a.player:active {color: #80ff80;}
    Also, if all your links (or groups of links) are decendants of a single element, you can class or id that parent element and get rid of multiple a classes.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can also make two classes for the two different link styles...

    .topmenu {stuff}
    .topmenu a:link {stuff}
    .topmenu a:hover {stuff}
    .topmenu a:visited {stuff}

    .leftmenu {stuff}
    .leftmenu a:link {stuff}
    .leftmenu a:hover {stuff}
    .leftmenu a:visited {stuff}

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by zachoff
    You can also make two classes for the two different link styles...

    .topmenu {stuff}
    .topmenu a:link {stuff}
    .topmenu a:hover {stuff}
    .topmenu a:visited {stuff}

    .leftmenu {stuff}
    .leftmenu a:link {stuff}
    .leftmenu a:hover {stuff}
    .leftmenu a:visited {stuff}
    It's worth updating the knowledge/advice you share to take into account the 'correct' running order for the pseudo-classes, as mentioned earlier in the thread. It saves potential problems if others take your code advice literally or base their declarations upon those which they've copied and pasted directly from one of your posts.


  •  

    Posting Permissions

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