Change div background image with link hover

JavaScript
1

Ok, I need to accomplish the following…when I hover back and forth over a link in one area of a page, the background-image of a div in another part of the page needs to change back and forth. I have been trying all sorts of things in jquery with no results! Any ideas would be appreciated…here’s the jquery script…

$function() {
$("#about-lifebook").hover(over,out);
	function over (event) {
     $(.spacer-bg-off).css("background", "url(images/spacer-content-bg.png)");
   }
   function out (event) {
     $(.spacer-bg-off).css("background", "none");
   });

The link’s id is “about-lifebook” and the div in question has a class of “spacer-bg-off”. Any ideas? This ain’t working at all.

Edit: I just read this off of the jquery website: “The .hover() method binds handlers for both mouseenter and mouseleave events. We can use it to simply apply behavior to an element during the time the mouse is within the element.”
So perhaps the behavior has to be applied to the element being hovered over? How can I change the css of one element while hovering over another one?

2

Basically, I am trying to solve the issue shown in these pictures. When a nav item is hovered, the whole area below the nav needs to switch to the dark transparent bg shown in the image. The way I’m thinking of doing it is to create basically an empty div under the nav. It’s not semantic but it needs to work in IE too, so after a lot of fiddling with pngs, I decided it was the most practical way. So, when the cursor is hovered over any nav item, the div would display the dark bg and when the cursor goes off a nav item, the div displays no background. Can anyone help me out here? How could this work?

975×182 29.1 KB

976×190 34 KB