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更改背景圖像

回答

相關問題