jQuery更改背景图像答案

【问题标题】：jquery change background-imagejQuery更改背景图像
【发布时间】：2012-09-24 17:02:51
【问题描述】：

我正在尝试用 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。

悬停购买按钮。

【问题讨论】：

可能是你的图片路径错误或者图片没有上传到服务器
等等，你为什么不在 CSS 中做这个？

标签： javascript jquery html css

【解决方案1】：

图像消失是因为 jQuery 在本地替换了 CSS，而不是像以前那样从样式表中替换。因此，您的路径需要更新以反映从 HTML 文件到图像的路径。如果您的 HTML 文件在您的根文件夹中，并且在该根目录中“映像”了一个文件夹，则代码将如下所示：

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

一开始也把我搞砸了。

【讨论】：

这个解决方案对我有帮助，因为我在 url() 语句的末尾有一个分号。我删除了分号，图像更改正确。

【解决方案2】：

试试这个，反正代码更好：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

相对路径适用于默认 css，但在 jquery 更新它之后，它不起作用。我不得不改变它。谢谢
@Iosub 另外，也许您想考虑更改类而不是内联 css？通过使用这些：.addClass().removeClass().toggleClass() 改变类会使其更简单......至少在我看来。另外，您可以从 css 文件更改图像 url。此外，谷歌搜索例如：“addclass jquery”将为您提供 jquery api 的方向，这将为您提供更多信息。

【解决方案4】：

语法如下

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

【讨论】：

【解决方案5】：

添加完整的图片路径并检查

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

【讨论】：

+1，但是你应该把第一张图片改成compra_mouseOver.png

【解决方案6】：

使用 jQuery.hover 代替 mouseover 和 mouseout

【讨论】：