jquery改变背景图像

Question

我正在尝试用jQuery交换两个图像.使用我尝试的悬停事件:

$("#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)');
});

但是图像没有显示,在我从中获取鼠标后,它会触发第二个事件.它应该与第一张图片一起更新,但事实并非如此.

你可以看看这里:http://107.20.186.103/deals/cuerpon.

将鼠标悬停在" 购买"按钮上.

Answer 1

图像消失是因为jQuery在本地替换CSS而不是像以前那样从样式表中替换CSS.因此,您的路径需要更新,以反映从HTML文件到图像的路径.如果您的HTML文件位于根文件夹中并"映像"该根目录中的文件夹,则代码将如下所示:

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

起初也搞砸了我.

Answer 2

如果我尝试在浏览器中手动输入 URL http://107.20.186.103/images/compra_mouseOver.png，我会得到 404。

http://107.20.186.103/deals/images/compra_mouseOver.png得到一个奇怪的 500...

我认为你应该准备好你的图像文件并且它会起作用。您还可以使用 jQuery.hover 函数调整您的代码。