javascript - 悬停时更改 div 内的图像 "src"

Question

这个问题已经有答案了:

Change the image source on rollover using jQuery (14 个回答)

已关闭 8 年前。

我对 javascript 和 jquery 非常陌生，所以我需要一些帮助。当我将鼠标悬停在每个图像上时，如何更改图像源？例如，当我将鼠标悬停在 facebook 图标上时，它会发生变化，当我将鼠标悬停在 google+ 图像/图标上时，它会更改为我拥有的另一张图像等。

<div class="social-icons wrapper-social">

     <a href="#" target="_blank">
          <img id="facebook" src="images/Facebook.png" />
     </a>

     <a href="#" target="_blank"> 
          <img id="google" src="images/Google+.png" />
     </a>

     <a href="#" target="_blank">
       <img id="twitter" src="images/Tweeter.png" />
     </a>

      <a href="#" target="_blank">
          <img id="pinterest" src="images/Pinterest.png" />
      </a>

</div>

提前致谢!

Answer 1

$(document).ready(function() {
    $("#facebook").hover(function() {
        $(this).attr("src","new src");
    });
});

如果您想保留以前的图像，请使用以下代码

var old_src="";
$(document).ready(function() {
    $("#facebook").mouseover(function() {
        old_src = $(this).attr("src");
        $(this).attr("src","new src");
    }).mouseout(function() {
         $(this).attr("src",old_src);

    });
})