CODEWITHSUNDEEP
javascriptjqueryhtmlcss
David Coggins
David Coggins

Reputation: 841

new background image for each menu parent item on hover

I am wondering how to accomplish this. I have a menu that sits in a 500px high container with a background image. I want to be able to change the background image when hovering over a parent menu item. I thought this could be accomplished with something like:

jQuery:

$('#elm').hover(
   function(){ $(this).addClass('hover') },
   function(){ $(this).removeClass('hover') }
)

Or with a .toggleClass

and then just define the background image in the css classes they switch to. I have it all set up for the first menu item in my DEMO HERE however it is currently not working. Seems so straight forward I dont see why its not working. Any help would be great....thanks guys.

*i have one function commented out in the example to try it different ways

Upvotes: 1

Views: 125

Answers (3)

Kroltan
Kroltan

Reputation: 5156

Just use plain CSS.

#elm {
    /*Style when not hovered*/
    background: url(http://placehold.it/200x300);
}

#elm:hover {
    /*Style when hovered*/
    background: url(http://placekitten.com/200/300);
}

Upvotes: 3

Sam Battat
Sam Battat

Reputation: 5745

you are missing something in the code

$('.image-changer-hover').toggleClass('image-changer-hover2');

should be

$('.image-changer-hover1').toggleClass('image-changer-hover2');

and the starting of jquery code is like this:

$(document).ready(function(){
.....
.....
.....
});

this works http://jsfiddle.net/wR7PN/8/

Upvotes: 2

markusthoemmes
markusthoemmes

Reputation: 3120

I put together a quick jsFiddle, which should solve your problem: http://jsfiddle.net/2a6Rg/

Everytime you hover over a li, a class specified by data-element gets added to its parent, so you can change backgrounds by using CSS.

Important code is:

$('#nav li').hover(
    function() {
        $(this).parent().addClass($(this).data('element'));
    },
    function() {
        $(this).parent().removeClass($(this).data('element'));
    }
);

Upvotes: 0

Related Questions