jquery change background-image

Question

I'm trying to swap two images with jQuery. Using the hover event I tried:

$("#wlt-DealView .buyButton_new").mouseover(function(e){
    $('.buyButton_new').css('background-image','url(../images/compra_mouseOver.png)');
});
$("#wlt-DealView .buyButton_new").mouseout(function(e){
    $('.buyButton_new').css('background-image','url(../images/compra_normal.png)');
});

But the image is not showing and after I get the mouse from it, it triggers the second event. It should update with the first image, but it doesn't.

You can have a look here: http://107.20.186.103/deals/cuerpon.

Hover the BUY button.

Answer 1

The image disappears because jQuery replaces the CSS locally and not from your stylesheet as before. So your path needs to be updated to reflect the path from your HTML file to your image. If your HTML file was in your root folder and "images" a folder within that root, the code would be like this:

$('.buyButton_new').css('background-image','url(images/compra_mouseOver.png)');

messed me up at first too.

Answer 2

Try this, the code is better anyway:

$("#wlt-DealView .buyButton_new").hover(
    function()
    {
        $(this).css('background-image','url(../images/compra_mouseOver.png)');
    },
    function()
    {
        $(this).css('background-image','url(../images/compra_normal.png)');
    }
);