Question

我有一个img标签，其中包含以下详细信息：id =＆＃34; hover1＆＃34; SRC =＆＃34; hello.png＆＃34;

使用两个单独的按钮，我可以使用以下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，Mozilla 26.0，Windows7。感谢。

Answer 1

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

让我们看看..谢谢你

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？ Here 小提琴

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

Answer 4

要轻松交换图像，您可以通过NPM使用开源库bootstrap-spacer

npm install swapimagesonhover

或者您可以访问github页面：

https://github.com/chigozieorunta/swapimagesonhover

使用上述库，data-img属性用于附加您要交换的第二张图像。完成此操作后，只需将您的游泳类添加到image元素就可以了（确保包括了jQuery脚本，它要求它正常工作）。

以下是示例：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="swapimagesonhover.css" rel="stylesheet" type="text/css"/>
    <script src="swapimagesonhover.js" type="text/javascript"></script>
</head>

<body>
    <img src="image1.jpg" data-img="image2.jpg" class="swim"/>
</body>

使用jQuery悬停交换图像

4 个答案:

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