#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Posts
    86
    Rep Power
    12

    A:hover doesn't work with LI


    Hi!

    Any idea why this doesn't produce the correct hover effect in Mozilla 1.2a?

    Code:
    li{list-style-type:circle;color:#693;}
    li a:hover {list-style-type:square;color:#c00;}
    Can't even get the color of the circle/square to change... if I could get the shape to change, that would be great.

    Thanks.
  2. #2
  3. No Profile Picture
    CF sMod
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Location
    Maine, USA (a.k.a. Boonies)
    Posts
    242
    Rep Power
    15
    The a element does not render list-style-type's. When you are assigning it in the :hover, you are not affecting the li at all. Just the children anchors, and these effects don't do anything.

    If it works in IE, then IE is horriblywrong in its interpretation of it.

    Use:

    li:hover {
    list-style-type: square;
    }

    Like you are supposed to.
    Jason Contact Me
    Super moderator @ CodingForums
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Posts
    86
    Rep Power
    12
    Oh doh! Definetly was tired yesterday when I wrote that post. Thanks for the clarification, working great now. (Note to self: look at code carefully when tired).

    Thanks.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    li:hover probably won't work in Explorer either. Selectors and pseudo-classes aren't exactly the browser's forte.

    As far as I know, they only work properly in the newest browsers, Netscape7 and Mozilla.

IMN logo majestic logo threadwatch logo seochat tools logo