Posted by Els on 06/28/05 20:48

Jonathan N. Little wrote:

> Els wrote:
>> Lauri Raittila wrote:
>>
>>>in alt.html, Els wrote:
>>>
>>>>Lauri Raittila wrote:
>>>>
>>>>
>>>>>in alt.html, Greg N. wrote:
>>>>>
>>>>>>Lauri Raittila wrote:
>>>>>>
>>>>>>
>>>>>>>a:hover img {}
>>>>>
>>>>>As noted, don't work in IE, even if I thought it would.
>>>>
>>>>But it /does/ work in IE.
>>>
>>>That was my memory as well...
>>>
>>>
>>>>I know there are some circumstances in which
>>>>it may not work (I think we discussed this before some time), but in
>>>>most cases it certainly does work in IE. Check the site in my sig and
>>>>hover over thumbnails. You'll see the border change color, which is
>>>>done by the a:hover img{} rule.
>>>
>>>I made testcase, and it didn't work. So it seems you might need to do
>>>some tricks to make it works, and you may just well do them
>>>accidentally..
>>
>> The trick I remember, is that you have to set the styles (colors
>> only?) for the regular links too, earlier in the CSS file. Without
>> that, it doesn't work on images in IE. (this is from memory though -
>> about a year and a half back when I discovered why it worked/didn't
>> work)
>>
> It does *not* work in IE.

Does too :P

> IE will only recognize the psuedo-class hover
> on *A*s,

Correct. the pseudo-class hover /is/ on a, when you apply the style to
the image inside of it.

> thats way JavaScript hack are required for CSS fly-out list
> menus to make them work of IE.

That's a whole different thing. IE does not support :hover on anything
else than the <a> element, that's true. But it does work to apply
styles to elements that are inside the <a> element which is on hover.

> A way around this for OP is to apply the
> border change to the A tag. This works...
>
> .left { float: left; }
> .imga IMG { border: 0; vertical-align: bottom; }
> a.imga { border: 2px solid green; }
> a.imga:hover { border: 2px solid red; }
>
> <a class="imga left" href="http://www.google.de"><img
> src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>
> <a class="imga left" href="http://www.google.de"><img
> src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>

Yes, that works too, but just to prove to you that IE does understand
it the way I described, here's a very simple, temporary example:

http://here.locusmeus.com/temp/doestoo.html

If you would take out the colour style for a:hover, it wouldn't work.
I deliberately gave the a:hover style a different colour than the
borders on the image, so you can be sure it's not the border on the
<a> element that is changing colour when hovering over the image.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Back to original message]