使用jQuery悬停交换图像

Question

我有一个包含以下详细信息的img标记: id="hover1“src="hello.png”

​

使用两个单独的按钮，我可以与以下jQuery交换图像：

$('#button1').click(function(){
$('#hover1').attr('src', 'hello_hover.png');
});

$('#button2').click(function(){
$('#hover1').attr('src', 'hello.png');
});

然而，当我尝试用下面的代码交换图像时，似乎什么都没有发生。

$('#hover1').hover(function(){
$(this).attr('src', 'hello_out.png');
}, function(){
$(this).attr('src', 'hello.png');
});

代码在我看来没问题。导致它失败的原因是什么？请帮帮我。我使用的是jQuery 2.1.0，Mozilla26.0，Windows7。谢谢。

Answer 1

$(function () {
    $('a img').hover( function () {
        $(this).attr('src', $(this).attr('src').replace(/\.jpg/, 'yourImageName.jpg') );
    });

让我们看看这个..Thank你

Answer 2

我在这里工作得很好。尝试使用以下JQuery代码，并等待它运行，直到文档加载完成：

$(document).ready(function(){
    $('#hover1').hover(function(){
        $(this).attr('src', 'hello_hover.png');
    }, function(){
        $(this).attr('src', 'hello.png');
    });
});

工作小提琴：

http://jsfiddle.net/st7sM/1/

Answer 3

也许它不是你想要的，但也许它可以帮助你

为什么你不只使用CSS？的小提琴

#hover1{
    background-image: url('http://lorempixel.com/400/200/sports/4');
    height:200px;
    width:400px;
}
#hover1:hover{
    background-image: url('http://lorempixel.com/400/200/sports/1/');
}