0

我对 javascript 和 jquery 很陌生，所以我可以使用一些帮助。悬停每张图片时如何更改图片 src？例如，当我将 facebook-icon 悬停时，它会发生变化，当我将 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>

提前致谢！

4

4 回答 4

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

    });
})
于 2014-11-19T08:42:20.473 回答
0

只是跟进 WisdmLabs 的回答。

这是演示

这是 jQuery

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

这是一个使用 NATH 谈论的 CSS sprites 创建的解决方案。它将减少服务器上的负载，因为 CSS sprite 只会加载一次，然后可以多次使用它来实现悬停效果。

CSS 精灵演示

于 2014-11-19T08:46:45.490 回答
0

这是更新的工作代码。

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);
}
于 2014-11-19T08:59:20.127 回答
0

这不需要 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>
于 2014-11-19T09:06:29.960 回答