Hover on one, change another

[theuedimaster]

Okay here is the problem, on the hover property of this object:

div.firstp a:hover {

I want to change the
background-image property of div.outer to none. How can I do that?

[MstrBob]

You can't, to my knowledge. CSS isn't a programming lanuage. It simply controls how that particular link will be displayed in the hover state. However, you could do that with javascript. Something like:


<script type="text/javascript">
<!--
function bgRemove()
{document.getElementById('outer').style.background='none';}
function bgReplace()
{document.getElementById('outer').style.backgroundImage='url("background.jpg")';}
// -->
</script>



<a href="whatever.html" onmouseover="bgRemove();" onmouseout="bgReplace();">A link</a>

[theuedimaster]

yea, i've done it with js before, but i was really going for total compatability when redesigning my site...... well i guess this is a little thing for decoration, js people get it for having a better browser I guess :)

[Ben Rogers]

If you felt like positioning the thing to be hovered absolutely, giving it a margin-bottom of about 1.3 em, and then stretching it to fill its parent, then you could acheive the same effect...

[Jona]

Full compatibility doesn't mean "no JavaScript," it means, "complete functionality regardless of the user agent capabilities." Use JavaScript, by all means, but do not rely on it.