[Jquery]switch bg image on div using hover

Hi, I am not the world's most advanced javascript user so I am hoping someone can help me out.
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 go
es off a nav item, the div displays no background. Can anyone help me out here? How could this work? Here is the code I am using (which does nothing) and the images showing what I need to happen."spacer-bg-off" is the empty div which needs to get the dark transparent bg image. Any solutions? Thanks...!

$function() {
$("#nav a").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");
   });

Code (markup):

 

Hi, did you try pure CSS for this:

<style type="text/css">
#nav a:hover{
background:url('images/spacer-content-bg.png');
}
</style>

HTML:

Regards

 

if you look at the pictures I can't see how that would work at all...please look closely, it seems impossible based on the pictures I posted...that area has to switch backgrounds when the nav item is hovered, not just when any part of the area is hovered...

 

Ok, this should works:

jQuery(document).ready(function(){

jQuery('#nav a').mousemove(function(){
jQuery('.spacer-bg-off').css('backgroundImage','url("images/spacer-content-bg.png")');
});

jQuery('#nav a').mouseout(function(){
jQuery('.spacer-bg-off').css('backgroundImage','');
});

});

Code (markup):

If '.spacer-bg-off' belongs to (is child of) '#nav a' best is using pure css

 

Again if you look at the images, I cannot see how you could possibly use CSS. That background is supposed to stay dark while you hover all of the menu items, and then disappear when you hover off them. You can see each "a" element in that dropdown cannot contain a div that is the size of that whole background-panel, because the "a" elements are a set height and width...if you were to make that whole panel div a child of that top a element, how would you possibly code all those other links there?

I have tried you jquery approach but not with mousemove, only with mouseover or hover, so maybe I will give that a go.

Anyone else? Gotta figure this out!

 

whoa koko 5, I just tried your jquery way and it is working....have to tweak it now...but a good start! thanks!

 

You're welcome
Try this too:

<style type="text/css">
#nav a:hover .spacer-bg-off{
background:url('images/spacer-content-bg.png');
}
</style>

Code (markup):

This works if element with class name 'spacer-bg-off' is child of "a-Element", which is child of element with id "#nav"

 

You know what, I just realized this isn't going to work in IE6. The way it would work would have to be to switch classes on hover. I can't get this to work though. Here's my jquery:

$(function(){

$('#nav a').mouseover(function(){
$('div.spacer-bg-off').addClass('.spacer-bg');
});
$('#nav a').mouseout(function(){
$('div.spacer-bg-off').removeClass('.spacer-bg');
});

Code (markup):

The CSS:

.spacer-bg-off {
	height:126px;
	background:none;
	}
	
.spacer-bg {
	height:126px;
	background:url(../images/spacer-content-bg.png) left top repeat-x;
	}

Code (markup):

});

I always seem to mess up the syntax with my jquery...can anyone see why this isn't working? Thanks...

 

Can you share your html-only code

 

Sure, here's the html...also I have this online at here.

EDIT: The jquery should target #main-nav instead of "nav a" so the bg image appears when you hover anywhere on the entire navigation....

$(function(){

$('#main-nav').mouseover(function(){
$('div.spacer-bg-off').addClass('.spacer-bg');
});
$('#main-nav').mouseout(function(){
$('div.spacer-bg-off').removeClass('.spacer-bg');
});

Code (markup):

HTML

<div id="nav">

<h1><a href="index.html">Lifebook</a></h1>

<ul id="main-nav">

<li><a id="about-lifebook" style="border:1px solid red;" href="#">About Lifebook</a>
		
       <ul>
        
	<li id="hover-first"><a href="#">Lifebook is...</a></li>
	<li><a href="#">Explore the 12 Categories</a></li>
	<li><a href="#">Creating Your Lifebook</a></li>
	<li><a href="#">Life After Lifebook</a></li>
       </ul></li>
        
        
        
<li><a id="about-you" href="#">About You</a></li>
<li><a id="about-us" href="#">About Us</a></li>
<li><a id="assessment" href="#">Take The Assesment</a></li>
<li><a id="register-now" href="#">Register Now</a></li>
</ul>
</div><!--end nav -->

<div class="spacer-bg-off">
<p>test test test</p>
</div>

<div id="content">


<a id="content-leftbutton" href="#">
Lifebook content left</a>


<a id="content-rightbutton" href="#">
Lifebook content right</a>
</div>

Code (markup):

 

Hmm, this should almost works... Try document.ready instead of simple $function.

When you add class, than "spacer-bg-off" becomes "spacer-bg-off spacer-bg" - try alert this.className to check it
Edit: I mean:

<div class="spacer-bg-off" onclick="alert(this.className);">

Code (markup):

 

Aha! It's not addClass('.spacer-bg'), it's addClass('spacer-bg'). I was adding the period before the class but you don't need to do that. Wow, a day and a half and that's the problem. hahah. Anyway, it still doesn't work properly for IE6 but it's a lot closer....thanks for you help...

 

this is causing a flicker in IE browsers, any ideas on how to fix that? I am stuck again...grrr

www.jontakiff.com/lifebook2