Can't access JQuery through CSS - php

Question

I am trying to write a menu for a front page that when an item is hovered over, the background image of the background div changes.
I have three main documents creating this effect, menuFunction.php, which is included in the header file, so it is not a link problem, then there is index.php, and finally my stylesheet.
Here is an example of one of the menu items functions from my menuFunction.php file:
<script>
$(document).ready(function () {
$(".resume").hover(function () {
$(".backgroundImage").css("background", "url(http://www.vhawley.com/wp-content/themes/vhawleycomtheme/css/style/images/menuResume.jpg)");
});
$(".resume").mouseleave(function () {
$(".backgroundImage").removeAttr('style');
});
});
</script>
Now here is where it is mentioned in index.php:
<div id="photoBackground" class="backgroundImage">
<div id="menuWrap">
<ul id="menu">
<li id="menuResume" class="resume">Resume</li>
<li id="menuAbout" class="about">About</li>
<li id="menuGallery" class="gallery"><a href="http://www.vhawley.com/gallery">Gallery</li>
<li id="menuContact" class="contact"><a href="http://www.vhawley.com/contact">Contact</li>
</ul>
</div>
</div>
Notice that the classes mentioned in the menuFunctions.php are also mentioned in the corresponding li.
Now, I am able through my stylesheet to define that the background have the following attributes for #photoBackground
#photoBackground{
height:450px;
width:100%;
background-image:url(http://www.vhawley.com/wp-content/themes/vhawleycomtheme/css/style/images/menuDefault.jpg);
background-repeat:no-repeat;
background-position:center;
}
Lastly, what I am now trying to accomplish is to get the rest to work, but even when I use the class .resume in my CSS, it does not work, even when I use the div #menuResume, no luck. I have been trying forever and have tried putting off asking for help on this one, but I really am stuck. I have really no JQuery experience, just CSS, HTML 5, and some PHP, which usually if you can master them, they can make a decent site alone. Until you want to get fancy like this.
Any ideas?
EDIT:
It is an issue with linking the JQuery variables to CSS, it has nothing to do with getting the background to change, because as Popnoodles proved on JSFiddle, nothing is wrong with that.

Answer 1

You could do this with the css :hover selector. However, if you want to use jQuery, you need to change .css('background'... to .css('background-image'...
It is the small mistakes that trip us up the most.
Edit to clarify your mistake:
The background style overrides everything, including background-repeat and background-position so those are all gone. If you used background-image it wouldn't override those other css options.
<script>
$(document).ready(function () {
$(".resume").hover(function () {
$(".backgroundImage").css("background-image", "url(http://www.vhawley.com/wp-content/themes/vhawleycomtheme/css/style/images/menuResume.jpg)");
});
$(".resume").mouseleave(function () {
$(".backgroundImage").removeAttr('style');
});
});
</script>

Answer 2

Best way to do this would be plain css
.resume #photoBackground {
...
}
.resume:hover #photoBackground {
... new image
}

Answer 3

I would research spriting to save some image loads, but that would requeire a fixed or known hight for the background image container. I would also use the following instead of wiring up a handler for each menu item:
HTML
<div id="photoBackground" class="backgroundImage">
<div id="menuWrap">
<ul id="menu">
<li id="menuResume" class="resume">Resume
</li>
<li id="menuAbout" class="about">About
</li>
<li id="menuGallery" class="gallery">Gallery
</li>
<li id="menuContact" class="contact">Contact
</li>
</ul>
</div>
</div>
Script
//Save looking up background container each time
var background = $("#photoBackground");
$("#menu li").hover(
//Hanldes Mouse Enter
function () {
var cssClass = $(this).attr('class');
$(background).addClass(cssClass);
},
//Handles Mouse Exit
function () {
var cssClass = $(this).attr('class');
$(background).removeClass(cssClass);
})
CSS
.backgroundImage {
background-image:url(http://www.vhawley.com/wp-content/themes/vhawleycomtheme/css/style/images/menuResume.jpg);
}
.backgroundImage.resume {
background-position:left -100px;
}
.backgroundImage.about {
background-position:left -200px;
}
.backgroundImage.gallery {
background-position:left -300px;
}
.backgroundImage.contact {
background-position:left -400px;
}
This also kind of demonstrates the principle of spriting by just changing the offset of the background image. OF course you could always just change the background image itself.
Demo