SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Lists with the hover attribute using purely CSS?

    I was just reading through this Smiley Cat tutorial on creating hoverable (is that even a word?) lists using pure CSS. And whilst it's a nice solution, it's not ideal for all circumstances.

    Then I noticed that both the Smiley Cat website and the site he was referencing, Veerle's blog, have listed navigation that change colour when you hover them, both in Internet Explorer and Firefox.

    So I'm just wondering, what is the best way to achieve this effect? Thanks

  2. #2
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello.

    In your css:

    Code:
    a:link{color:blue;text-decoration:none;font-weight:normal;)
    a:visited{color:redF;text-decoration:none;font-weight:bold;)
    a:hover{color:orange;text-decoration:underline;font-weight:bold;)
    a:active{color:green;text-decoration:underline;font-weight:normal;)
    Try something like this, experiment with it.
    a:hover changes styles for hovering over a link. a:link is an unvisited link, a:visited is a visited link and a:active is when you have clicked on a link and it is still openeing. Have fun!

    Note: when setting CSS styles, you should always set them in that order: link, visited, hover, active (From CSS: The Definative Guide (Eric Myer))

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't forget a:focus!
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Many thanks guys, but I'm talking more about hovering the list element rather than the link itself, and was wondering what the best way to go about it is in Internet Explorer.

    Basically, I didn't think it was possible to do so without Javascript or the .htc patch, but the links above prove me wrong :-)


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
  •