SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member vSkyfluxx's Avatar
    Join Date
    Mar 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple IE :hover problem

    Can someone please tell me why the following doesn't work in IE but does in Firefox? Also, how can I fix it? Any help is appreciated.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css" media="screen">
      a:link #showhide { display: none; }
      a:hover #showhide { display: block; }
    </style>
    </head>
    <body>
    <div>
      <a href="#">
        Mouse over me!
        <span id="showhide">
          Shhhhhh....
        </span>
      </a>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Member vSkyfluxx's Avatar
    Join Date
    Mar 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried attaching csshover.htc to the body via:

    body { behavior: url(csshover.htc); }

    but it still didn't fix anything in IE. In any case, as far as I understand, csshover is supposed to enable the :hover pseudo-class for elements other than <a> in IE, which isn't what I'm trying to do here.

    all4nerds, I changed the href attribute but that doesn't help. What do you mean by a:hover needs something?

  4. #4
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    aren't you changing the showhide id.. and not the link..

  5. #5
    SitePoint Member vSkyfluxx's Avatar
    Join Date
    Mar 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jezek, I'm changing the style of the element with the showhide id (the span) when the link is moused over.

    all4nerds, the :hover background works (as expected)

    Again, my issue is with why this doesn't work in IE. Open the page in Firefox or Opera, that's how it should work.

  6. #6
    SitePoint Member vSkyfluxx's Avatar
    Join Date
    Mar 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My apologies all4nerds, I disabled the regular behavior in trying the background :hover. It works now (still not sure why), thank you. Gotta love that IE...

  7. #7
    SitePoint Member vSkyfluxx's Avatar
    Join Date
    Mar 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    final thoughts:

    "a:hover { background: transparent; }" works as well

    and taking out "a:link" before "a:link #showhide { display: none; }" will also fix it in Opera (otherwise the Shhh... part is visible when it's not supposed to be).


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
  •