can't get css hover to work on link borders

[Greg N.]

Hi folks,

I can't get css hover to work for me. have a look at the tiny test case
at http://coolhaus.de/misc/test2.htm

questions:

1. why does the hover border work on the second link, but not on the
first? The only difference is, that the first img has a class (for
image positioning), while the second has no class assigned.

2. in the second case, where the hover does (sortof) work, why is the
top hover border missing?

3. why does the green border as defined in my css, not show?

 

[Steve Pugh]

I can't get css hover to work for me. have a look at the tiny test case
at http://coolhaus.de/misc/test2.htm

questions:

1. why does the hover border work on the second link, but not on the
first? The only difference is, that the first img has a class (for
image positioning), while the second has no class assigned.

You've floated the first image. Hence visually it is taken out of its
parent element, the <a> element in this case. The border is applied to

2. in the second case, where the hover does (sortof) work, why is the
top hover border missing?

It's not missing. It's behind the image. The <a> element is only as
tall as the line height and the image is taller so it spills out the
top of the <a> and covers the top border. This also explains the gap
between the bottom of the image and the bottom border in better

3. why does the green border as defined in my css, not show?

Because you've used a.imga: as the selector. Note the : at the end.

Steve

 

[Jonathan N. Little]

Hi folks,

I can't get css hover to work for me. have a look at the tiny test case
at http://coolhaus.de/misc/test2.htm

questions:

1. why does the hover border work on the second link, but not on the
first? The only difference is, that the first img has a class (for
image positioning), while the second has no class assigned.

2. in the second case, where the hover does (sortof) work, why is the
top hover border missing?

3. why does the green border as defined in my css, not show?

#3
a.imga: {border:2px solid green; }
^
remove colon, syntax error

#2
border applied to link not image, floating image 'pulls' image out of
link's span. try:

.left { float:left; }
a.imga IMG {border:2px solid green; }
a.imga:hover IMG {border:2px solid red; }

#1 related to #2, 'float' and which element your applied the border, I
this the above CSS is what you where looking for

 

[Greg N.]

#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?

 

[Greg N.]

http://coolhaus.de/misc/test3.htm

I have just (2 minutes ago) fixed a minor error in the sample referred
above. It does not affect the problem (the problem persists), but I
thought it's worth mentioning.

 

[Jonathan N. Little]

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!

 

[Mark Parnell]

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?

Either try and rewrite the page so you *can* apply the :hover to the
<a>, or use Javascript. Neither is ideal of course. Luckily a border on
hover is not too important.

 

[Lauri Raittila]

a:hover img {}

 

[Jonathan N. Little]

a:hover img {}

Nope! IE won't cooperate, you'll have to pin your hopes on IE7! ;-)

 

[Jonathan N. Little]

a:hover img {}

This will do what I think you want for both IE and the Geckos...

.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>

Note: I floated both links, you see what happens if you don't...

 

[Greg N.]

a:hover img {}

Lauri, forgive my ignorance, but what is the semantics of that?

The rule applies when an <img> elements within an <a> is pointed at?

 

[Dylan Parry]

Using a pointed stick and pebbles, Greg N. scraped:

The rule applies when an <img> elements within an <a> is pointed at?

Yes, that's exactly what the above means.

 

[Lauri Raittila]

As noted, don't work in IE, even if I thought it would.

Lauri, forgive my ignorance, but what is the semantics of that?

The rule applies when an <img> elements within an <a> is pointed at?

No, rule will apply to img, that is contained in a that is pointed at. Of
course, you only see difference, if there is something else than single
image in link.

 

[Els]

As noted, don't work in IE, even if I thought it would.

But it /does/ work in IE. 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.

 

[Lauri Raittila]

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..

 

[Els]

That was my memory as well...


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)

 

[Jonathan N. Little]

Lauri Raittila wrote:




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. IE will only recognize the psuedo-class hover
on *A*s, thats way JavaScript hack are required for CSS fly-out list
menus to make them work of IE. 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>

 

[Lauri Raittila]

It does *not* work in IE. IE will only recognize the psuedo-class hover
on *A*s,

Exactly. That's why I but that it to a, not to img.

Why not go look for Els' page? Works on my IE6:
http://locusmeus.com/

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

That is because link can't include another link, like menu would need.
Here we are not trying to make some clueless flyout menu.

 

[Els]

It does *not* work in IE.

Does too

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

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.

 

[Jonathan N. Little]

Exactly. That's why I but that it to a, not to img.

The trick was that for IE you have to remove the text decoration on the link

a:focus,
a:hover,
a:active{
text-decoration:none;
}

Why not go look for Els' page? Works on my IE6:
http://locusmeus.com/




That is because link can't include another link, like menu would need.
Here we are not trying to make some clueless flyout menu.

*WHAT?* Who said anything about nesting links? Of course nesting links
are invalid, but that had nothing to do with IE not recognizing the
pseudo-class hover on other elements like *LI* elements that are used in
CSS fly-out menus made with lists....