为什么我的jQuery悬停函数只适用于一个图像

Why does my jQuery hover function only works for one image

本文关键字：一个 图像 适用于 jQuery 我的 悬停 函数 为什么      更新时间：2023-09-26

我试图创建一个jquery函数来改变图像，当我悬停在图像上，它适用于第一个图像，但不是第二个，我不知道为什么。

<

按钮/strong> 

  $(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");
  });
});


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

试试这个:

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

注意:如果两个图像在页面加载后都出现在DOM中，则此操作将有效。如果你是动态加载，那么你必须使用jQuery的.on方法。

相关文章：