can't get css hover to work on link borders

[Lauri Raittila]

*WHAT?*

[Plonked for annoying all caps]

Who said anything about nesting links?

Me. TÝou were talking something about flyout menus, using it as a proof
of thing it is irreleated.

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

Yes, but you can make flyouts in IE. You just can't put links in them. So
flyout menu is impossible, which is totally different from styöling some
image inside a element.

 

[Jonathan N. Little]

*WHAT?*

[Plonked for annoying all caps]

Touchy aren't we?

Me. TÝou were talking something about flyout menus, using it as a proof
of thing it is irreleated.




Yes, but you can make flyouts in IE. You just can't put links in them. So
flyout menu is impossible, which is totally different from styöling some
image inside a element.

a:hover img {
border: 2px solid rgb(204,0,51);
}

 

[Els]

a:hover img {
border: 2px solid rgb(204,0,51);
}

That's what Lauri said, and you replied "Nope! IE won't cooperate,
you'll have to pin your hopes on IE7! ;-)" to that.

Am I missing something?

 

[Jonathan N. Little]

*WHAT?*

[Plonked for annoying all caps]

(message complete, Damn! Sent the wrong message, this on got out before
I was finished!)

Touchy aren't we?

Me. TÝou were talking something about flyout menus, using it as a proof
of thing it is irreleated.




Yes, but you can make flyouts in IE. You just can't put links in them. So
flyout menu is impossible, which is totally different from styöling some
image inside a element.

A:hover IMG{
border: 2px solid rgb(204,0,51);
}

Doesn't work in IE by itself like in Gecko, but requires the the
addition of

A:hover {
text-decoration: none;
}

removal of the link underline on hover to work in IE. Strangely enough
just removing text-decoration on he link all together does NOT work in
IE, i.e,:

a {
text-decoration: none;
}

Not sure what you would do if you desired no underline on you link at
all times...Before I discovered the very specific quirk above I
incorrectly associated that it was failing to restyle on hover the IMG
as a child the A as related to IE not supporting hover pseudo-class
other elements...

B:hover, SPAN:hover and LI:hover work in Gecko but not in IE. The last
is required in many CSS fly-out, hence my reference. I said nothing
about nesting links.

So 'A:hover [child element]' does work in IE if you remove the
text-decoration on the containing link upon hover as well. But only
certain style properties can be change though. You can change the
border, font properties, and color, but not the background....

A:hover {
text-decoration:none;
}

A:hover SPAN{ color: white; background-color: blue; }

<a href="#">This is a <span>Link</span> to nowhere</a>

Not sure why you would do this, but the background color is not set in
IE, but does work in FF, Moz, NN, and Opera...

 

[Els]

A:hover IMG{
border: 2px solid rgb(204,0,51);
}

Doesn't work in IE by itself like in Gecko, but requires the the
addition of

A:hover {
text-decoration: none;
}

No, it doesn't.
a:hover{color:red;}
will do. There really is no need to do anything about the
text-decoration.

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

removal of the link underline on hover to work in IE. Strangely enough
just removing text-decoration on he link all together does NOT work in
IE, i.e,:

a {
text-decoration: none;
}

That's because we're trying to get the :hover to work, not the link
itself. The border on the image is already working.

A:hover SPAN{ color: white; background-color: blue; }

<a href="#">This is a <span>Link</span> to nowhere</a>

Not sure why you would do this, but the background color is not set in
IE, but does work in FF, Moz, NN, and Opera...

It does work in IE too, if you would have set a background color for
the a:hover too.
a:hover{background-color:white;color:blue;}

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

 

[Jonathan N. Little]

Jonathan N. Little wrote:




No, it doesn't.
a:hover{color:red;}
will do. There really is no need to do anything about the
text-decoration.

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




That's because we're trying to get the :hover to work, not the link
itself. The border on the image is already working.




It does work in IE too, if you would have set a background color for
the a:hover too.
a:hover{background-color:white;color:blue;}

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

Ok I think I get what IE doing, to get

A:hover [ChildElement] {...}

to function you have to add

A:hover {...}

to 'set' the hover 'trap' on the A element where as the orther browsers
can recoginize the trap with single rule that included the child element...

Ah-ha

 

[Els]

Ah-ha