Question

我对javascript和jquery很新，所以我可以使用一些帮助。当我将鼠标悬停在每张图片上时，如何更改图像src？例如，当我悬停facebook-icon时，它会发生变化，当我将鼠标悬停在谷歌+图像/图标上时，它会变为我拥有的另一张图像等。

<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);

    });
})

Answer 2

跟进WisdmLabs的答案。

以下是DEMO

这是jQuery

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

这是使用NAT精神讨论的CSS精灵创建的解决方案。它将减少服务器上的负载，因为CSS精灵只会被加载一次，然后它可以被用于你的悬停效果。

CSS Sprite DEMO

Answer 3

以下是更新后的工作代码。

HTML部分 -

<div class="social-icons wrapper-social">
    <a href="#" target="_blank">
        <img class="imgRes" id="facebook" src="images/Facebook.png" />
    </a>
    <a href="#" target="_blank"> 
        <img class="imgRes" id="google" src="images/Google+.png" />
    </a>
    <a href="#" target="_blank">
        <img class="imgRes" id="twitter" src="images/Tweeter.png" />
    </a>
    <a href="#" target="_blank">
        <img class="imgRes" id="pinterest" src="images/Pinterest.png" />
    </a>
</div>

JavaScript部分 -

function handleImageHover(e) {
    if(e.target.id == "facebook") {
        e.target.src = "/images/newFacebookImage.png";
    }
    if(e.target.id == "google") {
        e.target.src = "/images/newGoogleImage.png";
    }
    if(e.target.id == "twitter") {
        e.target.src = "/images/newTwitterImage.png";
    }
    if(e.target.id == "pinterest") {
        e.target.src = "/images/newPinterestImage.png";
    }

}
var imagesArray = document.getElementsByClassName("imgRes");
for (img = 0; img < imagesArray.length; img++) { 
    imagesArray[img].addEventListener("mouseover", handleImageHover, false);
}

Answer 4

这不需要JavaScript / Jquery，这可以通过纯css来实现。

CSS

<style type="text/css">
.social-icons a{
    width: 35px;
    height: 35px;
    display: inline-block;
}
.facebookIcon {
    background-image:url('images/Facebook.png');
}
.facebookIcon:hover {
    background-image:url('images/FacebookHover.png');
}
.googleIcon {
    background-image:url('images/Google+.png');
}
.googleIcon:hover {
    background-image:url('images/GoogleHover.png');
}
.twitterIcon {
    background-image:url('images/Tweeter.png');
}
.twitterIcon:hover {
    background-image:url('images/TweeterHover.png');
}
.pinIcon {
    background-image:url('images/Pinterest.png');
}
.pinIcon:hover {
    background-image:url('images/PinterestHover.png');
}
</style>

HTML

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

    <a href="#" target="_blank" class="facebookIcon">

    </a>

    <a href="#" target="_blank" class="googleIcon">
    </a>

    <a href="#" target="_blank" class="twitterIcon">
    </a>

    <a href="#" target="_blank" class="pinIcon">
    </a>

</div>

更改图像＆＃34; src＆＃34;在悬停，在div内

4 个答案: