1

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

David Coggins
  • 841
  • 2
  • 6
  • 14

3 Answers3

3

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);
}
This company is turning evil.
  • 5,021
  • 5
  • 34
  • 58
  • I would agree, but I don't think this is what he's looking for. I'm pretty sure he wants the large background image to change on hover. – brouxhaha Feb 11 '14 at 17:58
  • @brouxhaha The concept is still the same. I edited the answer so it is even clearer. – This company is turning evil. Feb 11 '14 at 18:09
  • No it isn't. He wants the background image of the parent div to change when he hovers on a menu item. It's impossible to do this with css. If he wanted the background of the li to change, then yes. The answer by @Sam Battat is what the question is looking for. – brouxhaha Feb 11 '14 at 18:12
  • By his question's code, he will change the menu item's background. Thic CSS will do the same. He never mentioned the parent element in his question. – This company is turning evil. Feb 11 '14 at 18:31
  • The first two lines say exactly that: "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." It's confusing, so I've asked for clarification; but since the jsfiddle is trying to change the image on `image-changer-hover1` (the parent div), it's a little more clear what he wants to do. – brouxhaha Feb 11 '14 at 18:37
  • Oh sorry, indeed it makes more sense now. I'll upvote @SamBattat's answer. – This company is turning evil. Feb 11 '14 at 18:43
  • No problem. I completely understand why you thought what you did. I had to read it a couple times myself. And a lot of answers like this are simply to use css :hover. – brouxhaha Feb 11 '14 at 18:47
  • I mean when you hover on 'Domaine de Gourjo': one background-image, when hover on 'Our Wines': a different backround image. – David Coggins Feb 11 '14 at 19:08
  • @brouxhaha: It is not *impossible* with CSS. [Here is an example](http://stackoverflow.com/a/20703896/1968548) – Runium Feb 11 '14 at 21:20
  • @Sukminder: Right, but with the provided HTML and without moving anything around and/or adding additional elements, it's impossible. – brouxhaha Feb 11 '14 at 21:30
2

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/

Sam Battat
  • 5,725
  • 1
  • 20
  • 29
0

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'));
    }
);
markusthoemmes
  • 3,080
  • 14
  • 23