#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2001
    Posts
    6
    Rep Power
    0

    Question help with rollover CSS. I need one link to turn blue and another black.


    Hi,

    I was wondering how to write CSS for a page where I have two sets of links.

    1. Regular links which are blue and when you rollover them they turn light blue. This I have ok.

    2. my problem is a menu where I want my links to be white and when you rollover them they turn black.

    The only way I can get close to this is to force the menu links to stay white all the time.

    Does anyone know how I can have two sets of links colors on the same page and two different hover states?

    Thanks.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    19
    Code:
    <html>
    <head>
    <style>
    a:link
    { color: blue; font-size: 10px; text-decoration: underline }
    a:active
    { color: blue; font-size: 10px; text-decoration: underline }
    a:visited
    { color: blue; font-size: 10px; text-decoration: underline }
    a:hover
    { color: green; font-size: 10px; text-decoration: none }
    
    a.menu:link
    { color: red; font-size: 14px; font-weight: bold; text-decoration: underline }
    a.menu:active
    { color: red; font-size: 14px; font-weight: bold; text-decoration: underline }
    a.menu:visited
    { color: red; font-size: 14px; font-weight: bold; text-decoration: underline }
    a.menu:hover
    { color: green; font-size: 14px; font-weight: bold; text-decoration: none }
    </style>
    </head>
    
    <body>
    <p><a href="#" class="menu">Menu Link 1</a><br>
      <a href="#" class="menu">Menu Link 2</a></p>
    <p><a href="#">Normal Link 1</a><br>
      <a href="#">Normal Link 2</a></p>
    </body>
    </html>
    (*Change code to suit.)

    You have your default classes, a:link, a:hover etc and you also have pseudo-classes a.menu:link, a.menu:hover and in your hyperlinks you assign this class by using class="menu"
    Last edited by degsy; January 21st, 2002 at 10:05 PM.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2001
    Posts
    6
    Rep Power
    0

    Talking Thanks!


    Thanks a million!

    This will really help my project a lot and something I can use easily in the future.

    Cheers.

IMN logo majestic logo threadwatch logo seochat tools logo