Search code examples
javascriptjquerycssmouseovermouseout

mouseout set previus returns previous bg image of div

all. I have.

<div id="imagecontainer" class="header-image-container">&nbsp;</div>

BG image are specified in css for ich page according on parent class.

.category-1 #imagecontainer {
background: url(_/images/1.jpg);
}

And i have menu. I want to chage BG image ommouse over, and on mouse out return image specified in css for this page according on parent class. I think it could be real using JQuery. For example we have opened category-3 page and move mouse on category-1 menu item and see catefory-1 BG image in #imagecontainer, and then we move mouse out see again category-3 BG image.

Solution

  • I think this will do you want:

    $('#menu').mouseenter(function() {
    $('#imagecontainer').css({'background':'blue'});
}).mouseleave(function() {
    $('#imagecontainer').removeAttr('style');
})

    You can see it in action here: http://jsfiddle.net/Cdzk8/

    If you have other inline styles on your imagecontainer, it will also remove those on mouseleave. In that case, you will have do something more like what mblase75 is recommending.