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

これには 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 に答える
0

WisdmLabsの回答をフォローアップするだけです。

デモはこちら

ここにjQueryがあります

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

これは、NATH が話していた CSS スプライトを使用して作成されたソリューションです。CSS スプライトは 1 回だけ読み込まれ、ホバー効果に何度でも使用できるため、サーバーの負荷が軽減されます。

CSS スプライトのデモ

于 2014-11-19T08:46:45.490 に答える