CSS Hover of one element that can affect the class of another

[sammy_s_a_m]

Ok so here is my problem.

I need a little box with links next to it that rotate the content on rollover

So what I'm thinking (in an attempt to avoid javascript) is use <a> tags with a span inside them also so that the a:hover can change the span's css and unhide it also.

for example

<a href="#">Link 1 <span id="link1_span">This is the content that should appear</span></a>

<a href="#">Link 2 <span id="link2_span">This is the content that should appear</span></a>

So basically the span within the a is hidden (easy enough) until the a:hover which needs to unhide the span. (I'm planning on making it block to behave like a div and position it).

How do I use css to affect the span on the link rollover? Thanks.

Or is there a better way to do this?

[Xapti]

Pretty simple:
a(.class optional):hover span{display:block (or inline, depending on what you wanted. Realize that if you want it block, the 'a' element must be block as well)
You will also most likely want in addition "a(.class optional) span:hover{display:block(/display:inline)}" (or maybe a:hover span:hover {}... not sure if that's valid or not.) so that when you hover over the temporarily hidden text (nested text), it doesn't disappear again.

If you want to support IE6, you will need to keep with the a element, but realize that for any other browser (or IE6 with a javascript fix), can use any element to hover over, such as a span or div, since it would be more appropriate, considering 'a's are used to link to things.

[edited by: Xapti at 4:34 pm (utc) on July 21, 2008]