jquery更改背景图像

我试图用jQuery交换两个图像。使用悬停事件我试过了：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。

悬停购买按钮。

来源

2011-10-20 Gigg

可能是您的图片路径错误或者图片未上传到服务器 – matino

等等，为什么你不在CSS中执行此操作？ – twsaef

，如果我尝试进入在我的浏览器中手动输入网址http://107.20.186.103/images/compra_mouseOver.png，我得到了404。

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

我认为你应该让你的图像文件准备好，它会工作。您也可以使用jQuery.hover函数来调整代码。

来源

2011-10-20 06:56:57

相对路径为默认css工作，但jquery更新后，它不工作。我不得不改变它。谢谢 – Gigg

@Iosub另外，也许你会考虑改变类而不是内联的CSS？通过使用这些：'.addClass（）''.removeClass（）''.toggleClass（）'改变类会让它变得更简单......至少在我的脑海里。另外，你可以从css文件中更改图像的URL。此外，谷歌搜索例如：“addclass jquery”会给你指示jquery API，它会给你更多的信息。 – Joonas

的语法如下

$(element).hover(function(){ 
    $(this).css(whatever); 
}, function(){ 
    $(this).css(whatever); 
});

来源

2011-10-20 06:54:56 aperture

试试这个，代码更好呢：

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

来源

2011-10-20 06:55:24 JNDPNT

使用jQuery.hover代替鼠标悬停及移出

来源

2011-10-20 06:55:45 twsaef

添加完整图像路径和检查

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

来源

2011-10-20 07:05:55 Amila

+1，但是您应该将第一张图像更改为'compra_mouseOver.png' – Paulpro

这是一个错误。我已编辑路径 – Amila

图像中消失，因为jQuery的本地，而不是从您的样式表作为代替之前的CSS。因此，您的路径需要更新以反映从HTML文件到图像的路径。如果你的HTML文件在你的根文件夹和“图像”一个是根内的文件夹，该代码会是这样：

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

搞砸我起初也。

来源

2012-09-10 01:56:04 BrianG

此解决方案帮助我，因为我在url（）语句的末尾有一个分号。我删除了分号和图像正确更改。 –

jquery更改背景图像

回答

相关问题