Posted by Jonathan N. Little on 06/28/05 00:51

Greg N. wrote:

> Jonathan N. Little wrote:
>
>> #2
>> border applied to link not image, floating image 'pulls' image out of
>> link's span.
>
>
> I'm with you, the hover should be applied to the <img> rather than the
> <a>. I've been there before:
>
> http://coolhaus.de/misc/test3.htm
>
> So why does this work in FF, but not in IE? Well, I guess, a better
> question is: how do I make this work in IE?

The flippant answer is *'cuz IE sux!*
But a little testing shows that IE will not support pseudo-class 'hover'
on links but not on child elements

a.x { border: 2px solid green; }
a.x:hover { border: 2px solid red; }

a.y span{ border: 2px solid green; }
a.y:hover span{ border: 2px solid red; }

<p><a href="#" class="x">Test link 1</a></p>
<p><a href="#" class="y">Test <span>link 2</span></a></p>

but then again IE does not support 'hover' on non-link elements...

..z { border: 2px solid green; }
..z:hover { border: 2px solid red; }

<div class=z>This is a test</div>

which is the reason a JavaScript hack is required for CSS fly-out menus
to work on ol' IE!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]