Hover on one, change another

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?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=http://www.webdeveloper.com/forum/archive/index.php/"whatever.html" onmouseover="bgRemove();" onmouseout="bgReplace();">A link</a>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 :)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...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.
 
Back
Top