Javascript jquery 更改背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7832140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery change background-image
提问by Gigg
I'm trying to swap two images with jQuery. Using the hover event I tried:
我正在尝试用 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)');
});
But the image is not showing and after I get the mouse from it, it triggers the second event. It should update with the first image, but it doesn't.
但是图像没有显示，在我从中取出鼠标后，它触发了第二个事件。它应该用第一个图像更新，但它没有。
You can have a look here: http://107.20.186.103/deals/cuerpon.
你可以看看这里：http://107.20.186.103/deals/cuerpon。
Hover the BUYbutton.
将鼠标悬停在购买按钮上。
采纳答案by Phil Rykoff
If i try to enter the URL http://107.20.186.103/images/compra_mouseOver.pngmanually in my browser, i get a 404.
如果我尝试在浏览器中手动输入 URL http://107.20.186.103/images/compra_mouseOver.png，则会得到 404。
http://107.20.186.103/deals/images/compra_mouseOver.pnggets a strange 500...
http://107.20.186.103/deals/images/compra_mouseOver.png得到一个奇怪的 500 ...
I think you should get your image files ready and it will work. You may also tweak your code by using the jQuery.hover function.
我认为你应该准备好你的图像文件，它会起作用。您还可以使用 jQuery.hover 函数来调整您的代码。
回答by BrianG
The image disappears because jQuery replaces the CSS locally and not from your stylesheet as before. So your path needs to be updated to reflect the path from your HTML file to your image. If your HTML file was in your root folder and "images" a folder within that root, the code would be like this:
图像消失是因为 jQuery 在本地替换了 CSS，而不是像以前一样从样式表中替换。因此，您的路径需要更新以反映从 HTML 文件到图像的路径。如果您的 HTML 文件在您的根文件夹中并且“图像”了该根文件夹中的一个文件夹，则代码将如下所示：
$('.buyButton_new').css('background-image','url(images/compra_mouseOver.png)');
messed me up at first too.
一开始也把我搞砸了。
回答by JNDPNT
Try this, the code is better anyway:
试试这个，代码更好：
$("#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)');
}
);
回答by Amila
add the full image path and check
添加完整的图像路径并检查
$("#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)');
}
);
回答by aperture
The syntax is as follows
语法如下
$(element).hover(function(){
$(this).css(whatever);
}, function(){
$(this).css(whatever);
});
回答by twsaef
Use jQuery.hover instead of mouseover and mouseout
使用 jQuery.hover 而不是 mouseover 和 mouseout
