View Full Version : Changing the Background on a hover for an none adjacent element

05-22-2005, 08:11 PM
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">
<li id="li1">Stuff</li>
<li id="li2">More Stuff</li>
<li id="li3">Even More Stuff</li>

<div id="img"></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.

05-22-2005, 09:57 PM
The :hover pseudo class should work with any element, but in Internet Explorer it only works with links.



05-23-2005, 03:32 AM
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>
<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>
<div id="img"></div>

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

05-30-2005, 02:55 PM
are you looking to change an image or a div's background color?


05-30-2005, 03:31 PM
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.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum