multiple text elements with hover

[fishermon]

Hi all.

I would very much like to use a single javascript-less CSS solution to change the color of two different text elements when someone hovers above either piece of text.

The 'a:hover' rules all work when the 'a' tag is applied individually... and I've tried placing the 'a' tag around a wrapper div that contains both text elements... as well as individual spans within the 'a' tag... but none of these are valid.

From a back-end perspective, it would be ideal to deliver these pieces of text already in their respective stacked divs.

Any suggestions?

-Zak

[Robin_reala]

Welcome to WebmasterWorld fishermon!

CSS can only affect elements, their children and their later siblings - it can't move back up the tree. So if the element you want to affect is back up the tree or a preceding sibling then you're out of luck and will have to use Javascript. Judging by your description I think the only Javascriptless solution you're going to find is if your content looks something like:

<a href="#"><span>Text1</span> <span>Text2</span></a>

Then in you CSS:

a span { color: blue; }
a:hover span { color: red; }

That's valid and will work, but may not fit with what you're trying to do.

[DrDoc]

Welcome to WebmasterWorld! [WebmasterWorld.com]

You know that you can apply

:hover

to any element, not just anchors, right? :)

div:hover {
color: #006;
}

Now, unfortunately IE6 and older does not support

:hover

for non-anchors.
Now, fortunately there is a workaround [xs4all.nl] for that. :)

<added>
Oh, in case anyone is confused about why it is invalid to put an anchor around a div -- you can't put block level elements (such as divs, paragraphs, headings, etc) inside an inline level element (such as anchors, spans, i/b/em/strong, etc).
</added>

[edited by: DrDoc at 7:14 am (utc) on July 18, 2007]