Question

Hi Have a menu which look like this

<div id="products_menu" class="span-9 last">
 <ul>
   <li><a href="#">beauty</a></li>
   <li><a href="#">fragrence</a></li>
   <li><a href="#">at home</a></li>
 </ul>
</div>

I would like to use jquery to change the CSS background image of the main div based on the hover of one of the links.

for example when a user hovers over the Beauty link then change the css bg-imge to x and if the user hovers over fragrance then chaneg the css bg-image to y.

Any help would be great

Thanks

Answer 1

Sitting here in class kinda bored I decided it would be more useful to you and everyone if there was a real solution rather than the “Add an ID” and use common JQuery solution so here we go.

This solution will allow any size list and requires an array of strings that contain the path to your desired background images the array should linearly relate the list meaning the array[0] should be the image for elem 1 in the list and so on.

now for the code. Lucky for you with this solution you do not have to change any html.

var backgroundImages = ["path_to_bg_1", "path_to_bg_2", "path_to_bg_3", "path_to_bg_4"];
$("#products_menu li").hover(function () {
    $("#products_menu").css("background", "url("+backgroundImages[$(this).index()]+")")
}, function () {
    $("#products_menu").css("background", "url(PATH_TO_DEFAULT)")
})

and finally a proof of concept at jsfiddle
http://jsfiddle.net/k8ywX/