用 jquery 更改 src

Question

我正在尝试在悬停图像时更改图像的 src，但当我不再悬停时将其更改回来it.My问题是即使我只请求带有 src=[ 的图像=17=] 当我将鼠标悬停在图像上时，它会更改所有图像，而当我不再悬停时，它不会将它们更改回来。我的代码如下所示： HTML:

<footer>
    <div id="social-img">
        <a href=""><img src="img/fb-logo.png" alt="Sartoria Dana Design Facebook Page" /></a>
        <a href=""><img src="img/instagram-logo.png" alt="Sartoria Dana Design Instagram Page" /></a>
        <a href=""><img src="img/twitter-logo.png" alt="Sartoria Dana Design Twitter Page" /></a>
        <a href=""><img src="img/gplus-logo.png" alt="Sartoria Dana Design Google Plus Page" /></a>                            <a href=""><img src="img/yt-logo.png" alt="Sartoria Dana Design Youtube Channel" /></a>
    </div>
</div>
</footer>

Jquery:

$('footer #social img').mouseover(function () {
    if (this.src = "img/fb-logo.png") {
        this.src = "img/fb-logo-change.png";
    }
});

Answer 1

你可以用一个简单的数据集来做。您必须定义您需要的所有数据，在这种情况下我们可以使用 data-hover 和 data-out，然后使用 jquery 管理它。试试这个（运行代码片段以查看它是否有效）：

    $('img').on('mouseover',function () {
        var data = $(this).attr('data-hover');
        $(this).attr("src", data); // data-hover
    })
    $('img').on('mouseout', function() {
        var data = $(this).attr('data-out');
        $(this).attr("src", data); // data-out
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<img src="http://dummyimage.com/100x100/000000/ffffff&text=Image+1" 
       data-hover="http://dummyimage.com/100x100/ffffff/000000&text=Image+2"
       data-out="http://dummyimage.com/100x100/000000/ffffff&text=Image+1" />

用 jquery 更改 src

Change src with jquery

html

jquery

image

mousehover