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 10 of 10

Thread: a:hover problem

  1. #1
    New Coder
    Join Date
    Feb 2003
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    a:hover problem

    Hello, i haeve the following code in a .css file :

    a:link { color : #FFFFFF; text-decoration:none;}
    a:hover { color : red; text-decoration: none; text-style: italic;}
    a:visited { color: #FFFFCC; text-decoration:none;}

    The problem is that the color change only when i hover the mouse over a non-visited link. If i hover over a visited link the color doesnt change. Also the link doesnt change to italic at all. Anyone knows why is this happening?

    And something more. How can i aply different colors for the links for a part of an html page?

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The order you specify the rules affects how they operate (ie: their relative priority). Move the :hover rule AFTER the :visited rule and that will fix the problem.

    You can also use "class" or "descendant" selectors to create different rules for links in different parts of your web page.

    Code:
    a { ... }
    a:visited { ... }
    a:hover { ... }
    
    // Classes
    a.specialLinks { ... }
    a.specialLinks:visited { ... }
    a.specialLinks:hover { ... }
    
    // Descendant
    div.sidebar a { ... }
    div.sidebar a:visited { ... }
    div.sidebar a:hover { ... }
    Last edited by Roy Sinclair; 01-21-2004 at 04:28 PM.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #3
    New Coder
    Join Date
    Feb 2003
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Roy Sinclair
    The order you specify the rules affects how they operate (ie: their relative priority). Move the :hover rule AFTER the :visited rule and that will fix the problem.
    Thank you very much for the quick reply, it worked!

    Any ideas for the remaining matters? (about italic not working, and applying some different rules for the links only in a part of a page)

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    See my edited post, I posted the first part a bit too quickly
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The italics aren't working because text-style isn't a valid CSS rule, you should be using font-style instead.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #6
    New Coder
    Join Date
    Feb 2003
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again very very much!

  • #7
    J&J
    J&J is offline
    New Coder
    Join Date
    Sep 2003
    Location
    your temp folder
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS links in order

    Yup, if you don't put your CSS links in order, then one could override the other & drive you nuts. I always put this acronym in a comment section of my CSS template, so I'll remember the correct order - which is: LVFHA

    Link
    Visited
    Focus
    Hover
    Active
    ~ J&J ~
    "Sometimes I feel like I'm rearranging deck chairs on the Titanic."


    Work | Family | Community

  • #8
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    LoVe HAte is the way most people remember it.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #9
    Regular Coder
    Join Date
    Feb 2004
    Location
    UK, derby
    Posts
    142
    Thanks
    0
    Thanked 0 Times in 0 Posts
    a great post, worked for me.

  • #10
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Originally posted by me'
    LoVe HAte is the way most people remember it.
    Or, you know, Lewd Vicious Furry Hamster Attack. My personal favorite...


  •  

    Posting Permissions

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