Set span tag CSS in sibling mode

Question

Hey, does anyone know how I would do this with pure css.

<a id="link"><span>Some Text</span></a> <div id="someDiv"></div> 

Make “Some Text” a specific color when someDiv is blurred.

Not sure if this is possible. Thanks.

Answer 1

Due to how the CSS selector works, there is no previous sibling selector. Thus, with your existing markup, you cannot use pure CSS for this.

If the link appeared after the div, however:

 <div id="someDiv"></div> <a id="link"><span>Some Text</span></a> 

The selector to be used will be #someDiv:hover + #link span .

Answer 2

This may be possible if you have a parent to bind the hss cover class. For instance: -

 <div id="parent"> <div id="someDiv"></div> <a id="link"><span>Some Text</span></a> </div> 

& den use the following css.

 #link { position:absolute; /*This is to ensure the hover is activated only on the someDiv div & as absolutely positioned elements are removed from the normal flow of the document*/ /*You can position this anchor tag wherever you want then */ } #parent:hover > link > span { color:#000; /*enter code here/* } 

Answer 3

Clean css? Work in all browsers? Impossible in this structure.

Answer 4

I think this should work, assuming that these two elements have the same parent, and a#link is the first child of this parent.

 #parent div#someDiv:hover ~ a#link:first-child span { color: blue; } 

IE6 does not support it , but if you can live without IE6 (and you really should, IMO), you should be fine.