Changing the Background on a hover for an none adjacent element

Ok here's my problem. I have a list and when I hover an item on this list I want to change the background of a div underneath of this list. Something like this...


<div id="container">
<ul>
<li id="li1">Stuff</li>
<li id="li2">More Stuff</li>
<li id="li3">Even More Stuff</li>
</ul>

<div id="img"></div>
</div>


I tried to use ul #li1 #img and realized that the span would have to be nested in the list item, I thought of using the adjacent operator (#li1+#img), but the span is not directly after the list item.

So any thoughts? I'm sure there is a none javascript solution for this; if there isn't I'll just have to find something else to do.

The :hover pseudo class should work with any element, but in Internet Explorer it only works with links.

http://www.alistapart.com/articles/dropdowns/

:)

I've tried that. I just realized I forgot that in my example.

Here is my CSS right now:


#site #footer #powered:hover>span #img {
background: url("../imgs/styles/rising/powered.png");
}

#site #footer #css:hover>span #img {
background: url("../imgs/styles/rising/css.png");

}

#site #footer #markup:hover>span #img {
background: url("../imgs/styles/rising/markup.png");
}

#site #footer>#img {
background: url("../imgs/styles/rising/powered.png");
width: 400px;
height: 100px;
margin: 0 auto;
border: 1px solid #333;
}


And the XHTML that corresponds to that:


<div id="footer">
<h2><span>Geek Cred</span></h2>
<ul>
<li id="powered"><span>Pogrammed by Kurashu</span></li>
<li id="css"><span><a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a></span></li>
<li id="markup"><span><a href="http://validator.w3.org/check?uri=referer">Valid XHTML</a></span></li>
</ul>
<div id="img"></div>
</div>


If you want to see an online example, I'll upload it later.

are you looking to change an image or a div's background color?

matt

Why don't you put it inside the list and use the li:hover div#imgid whatever? You can make the div have absolute positioning.

Or you can go the javascript way.