javascript - 悬停时 JQuery-swap 到另一个图像 - 代码交换但到第一个选项

Question

我有个问题：

我在我的网站上有一个导航栏，上面有多个图像，我希望它们交换，所以我使用了我找到的这个代码，对其进行了一些更改，以便它对我有用，但由于某种原因，我第二次查看它改变的图像到第一个 有人可以帮我吗。附言。对不起我的英语不好

HTML：

<ul class="noBullet">
 <li><a href="#home" data-rel="close"><img class="fadeim" src="themes/menu/home=1.png"/></a></li>
 <li><a href="#spon"><img class="fadeim" src="themes/menu/spon=1.png"/></a></li>
     </ul>

查询：

 $(function() {
          // Change the image of hoverable images
          var openPng = $('.fadeim').attr('src');
          var closedPng = openPng.replace("=1.png", "=2.png");
          $('.fadeim').hover(function() { 
                $(this).stop(true, true).fadeOut(200, function() {
                      $(this).attr('src', closedPng).fadeIn(200);
                });
          }, function() {
                $(this).stop(true, true).fadeOut(200, function() {
                      $(this).attr('src', openPng).fadeIn(200);         
                });
          });
    });

Answer 1

这段代码可能会有所帮助。基本上，您设置第二张图像（应该作为data-*属性出现在悬停时的图像，以及在每个 mousein 和 mouseout 事件中，原始图像和存储在data-*属性切换位置中的图像。

<img class="hoverfun" src="first.jpg" data-hoverimg="second.jpg"/>

$(function(){
   $('.hoverfun').on('mouseenter mouseout', function(){
       var original = $(this).attr('src');
       var replacement = $(this).data('hoverimg');
       $(this).attr('src', replacement).data('hoverimg', original);
   });
});