SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2001
    Location
    earth
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is it possible to have more than one a:hover?

    Hello!

    Is it possible to have more than one a:hover in the same css document?

    Code:
    a:hover {
        text-decoration: underline;
        color: #FF9900;
    }
    But there are some links I would like it to be another color when mouse over.
    Is is possible to do that?

    Thank you

  2. #2
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can give them a classname.

    Code CSS:
    a:hover {
        color: #ff9900;
    }
     
    a.red:hover {
        color: #ff0000;
    }
    FOR SALE: 1 set of morals, never used, will sell cheap

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2001
    Location
    earth
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hexburner View Post
    You can give them a classname.

    Code CSS:
    a:hover {
        color: #ff9900;
    }
     
    a.red:hover {
        color: #ff0000;
    }
    Good, thank you.

    But now a silly question: how do I apply it? Because it assumes 1st the a and the a:hover.

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <a href="#" class="red">Link</a>
    However, if you've got a lot of links in a navigation bar for example

    Code:
    <ul id="navigation">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
    Instead of applying a class to each link you can use the id="navigation to target these links using

    Code:
    #navigation a:hover {
      color: #f00;
    }
    Off Topic:


    #f00 is the same as #ff0000;

  5. #5
    SitePoint Evangelist
    Join Date
    Jan 2001
    Location
    earth
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    Thank you csswiz!!!


Bookmarks

Posting Permissions

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