Problem with a:hover in IE

[garann]

Maybe I'm crazy, but I could swear I've been able to do this in IE in the past. I ran into trouble testing a CSS drop-down menu that relies on ":hover" to display elements within a link when the mouse is over the link. Even the simplest test doesn't work in IE, while it works fine in FF. In the code below, the span never shows up.

HTML:

<p style="position:absolute;top:400px;left:200px;"><a id="testLink" href="#">Test
<span>This is the test.</span></a></p>

CSS:

#testLink { color:#f00; }
#testLink span { display:none;}
#testLink:hover span { display:block;position:relative;top:0px;left:0px;background-color:#0f0;width:100%; }

If you can see the problem, thanks in advance for your help!

[iamlost]

The problem is that IE only applies :hover to a - as you alude in your thread title. Your CSS, however, is applying the :hover to the <div> #testlink.

See the following threads for work-arounds:

[webmasterworld.com ]

[webmasterworld.com ]

[SuzyUK]

garann

I think this is the same problem as reported on in this thread [webmasterworld.com]

it is a known IE issue and can be solved the same way, add a default rule for the :hover state of the link, then the :hover span should work..

e.g.
#testLink:hover {text-indent: 0;}

Seems like IE just doesn't recognise a "child" of :hover unless there is a specific :hover (parent) rule..

Suzy

[garann]

That did it. Thanks, Suzy!