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而不是像以前那样替换样式表。因此，您的路径需要更新，以反映从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

如果我尝试在浏览器中手动输入网址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

jquery改变背景图像

6 个答案: