Pourquoi ma fonction de survol de jQuery ne fonctionne que pour une image?

Question

J'essaie de créer une fonction jquery pour changer une image lorsque je survole l'image, cela fonctionne pour la première image mais pas pour la seconde, je ne suis pas sûr Pourquoi.

Boutons

$(document).ready(function(){ 
    var imgLinkedIn = $('#imgLinkedIn'); 
    var imgGithub = $('#imgGithub'); 

    imgLinkedIn.hover(function() { 
     $(this).attr("src","images/linkedIn-hover.png"); 
      }, function() { 
     $(this).attr("src","images/linkedIn.png"); 
    }); 

    imgGithub.hover(function() { 
    $(this).attr("src","images/Octocat-hover.png"); 
     }, function() { 
    $(this).attr("src","images/Octocat.png"); 
    }); 
}); 

HTML

 <a href="https://uk.linkedin.com/pub/ife-a/27/273/745" title="LinkedIn" id="imgLinkedin" target="_blank"> 
     <img class="imgContactLogos" id="imgLinkedIn" src="images/linkedIn.png" /> 
     </a> 
     <a href="http://github.com/cinofr3t" title="Github" id="imgGithub" target="_blank"> 
     <img class="imgContactLogos" id="imgGithub" src="images/Octocat.png"/> 
     </a> 

Answer 1

Essayez ceci:

HTML:

<a href="https://uk.linkedin.com/pub/ife-a/27/273/745" title="LinkedIn" target="_blank"> 
     <img class="imgContactLogos" id="imgLinkedIn" src="images/linkedIn.png" /> 
     </a> 
     <a href="http://github.com/cinofr3t" title="Github" target="_blank"> 
     <img class="imgContactLogos" id="imgGithub" src="images/Octocat.png"/> 
     </a> 
    </div> 

JS

$('#imgLinkedIn').hover(function() { 
    $(this).attr("src", "images/linkedIn-hover.png"); 
}, function() { 
    $(this).attr("src", "images/linkedIn.png"); 
}); 

$('#imgGithub').hover(function() { 
    $(this).attr("src", "images/Octocat-hover.png"); 
}, function() { 
    $(this).attr("src", "images/Octocat.png"); 
}); 

REMARQUE: cela fonctionne si les deux images sont présentes dans les DOM après chargement de la page. Si vous le chargez dynamiquement, vous devez utiliser la méthode jQuery .on.

Answer 2

d'abord faire ceci:

imgLinkedIn = $("#imgLinkedIn"); 
imgGithub = $("#imgGithub");