Hovering External Elements

need to hover an element outside of the current element

[cookiemonster]

Hi,

I want to change the style of an element when another element is hovered over. For example, I need to change the look of <div id="1"> when the user hovers over <div id="2">.
I know this is possible by using a code like this:

#1:hover #2 {style goes here}

However, in order for this to work, #2 must be inside #1.

So, my question is, is there any way to do this WITHOUT #2 being inside #1?

Thanks in advance, and sorry if this isn't very clear - I can clarify some more if needed

[limbo]

As far as I know, that sits outside the scope of what CSS2 can achieve with descendant selectors. As you say, the second div must be inside the first.

Javascript is the next best thing here. One of the JS frameworks takes the hard work out of the process.

[edited by: limbo at 4:14 pm (utc) on Mar 23, 2010]

[drhowarddrfine]

<style>
#one:hover + #two {border:1px solid}
</style>

<p id="one">one</p>
<p id="two">two</p>

Hover over the first p.

[limbo]

Good point drhowarddrfine, I've updated my post, It should have read:

...that sits outside the scope of what CSS2 can achieve...

Unless I'm totally mistaken we're a way off getting full support for advanced CSS selectors. But I think it's just IE6 issue for that particular example.