IE - style an anchor's child elements using a:hover

[ESquared]

For some reason I expected this to work:

<style type="text/css">
a:hover span {
   color:red;
}
</style>
<a href="">some text and <span>a span</span></a>

But it didn't work. And I was going to ask a question about it. But in playing with it, I found out something interesting. You can style child elements using the :hover pseudo-element as long as you also specify a style for the a element itself:

<style type="text/css">
a:hover {
	color:black;
}
a:hover span {
   color:red;
}
</style>
<a href="">some text and <span>a span</span></a>

 

[ESquared]

... and some more detail is that the styled property in the child element has to be styled in the a element as well. The following will not honor the red color style because the color was not styled in the a element.

<style type="text/css">
a:hover {
    background-color:black;
}
a:hover span {
   color:red;
}
</style>
<a href="">some text and <span>a span</span></a>

 

[Vragabond]

I think you might've stumbled upon this:

http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ESquared]

you're probably right. Joy! Another IE bug! WOOHOOO!

 

[Vragabond]

I do however believe that this was fixed in IE7. Have you experienced similar problems in IE7 as well?

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ESquared]

The first time I installed IE7, I used it for about 10 minutes and then promptly uninstalled it.

First of all, it was a total resource hog, and it was slow (on my admittedly older computer at the time).

Regardless of whatever its browsing features are, the toolbars at the top take up a cool two inches of vertical screen space, or nearly that. With IE6, I have my toolbars set to use 1/2 an inch of space, including the window title bar. I will fight tooth and nail against using a browser that steals this much screen space from me!

haha. I'm crazy.

 

[johnwm]

... however whatever browser you use for personal use shouldn't affect your test routine for websites!

Probably need a minimum of IE6, IE7, FF and Safari to test in.

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[ESquared]

intranet environment = standard browser