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 ：/ 10/ 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

试试这个，无论如何代码都更好：

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

Answer 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函数调整代码。

Answer 4

语法如下

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

Answer 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)');
    }
);

Answer 6

使用jQuery.hover而不是mouseover和mouseout