javascript - 为什么图像在悬停时不会更改为以前的图像？

Question

鼠标悬停显示 <div>正常，但在我第一次移动鼠标后，它不再显示另一个 <div>秒。它最终停留在最后一张图片上，不会更改为另一张图片。

我试过 fadeToggle但我希望它固定为最后出现的图像，但是fadeToggle鼠标移开时隐藏最后一张图片。

$('.second').hover(function() {
  $('.showsecond').fadeIn();
});
$('.third').hover(function() {
  $('.showthird').fadeIn();
});
$('.fourth').hover(function() {
  $('.showfourth').fadeIn();
});
$('.fifth').hover(function() {
  $('.showfifth').fadeIn();
});

.menuimage {
  display: none;
  position: absolute;
}

.menuimagefirst {
  display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
  <ul>
    <li class="first"><a href="#">first</a></li>
    <li class="second"><a href="#">second</a></li>
    <li class="third"><a href="#">third</a></li>
    <li class="fourth"><a href="#">fourth</a></li>
    <li class="fifth"><a href="#">fifth</a></li>
  </ul>
</div>
<div class="col-6">
  <div class="menuimage menuimagefirst showfirst">
    <img src="https://i.imgur.com/o87PUwV.jpg" />
  </div>
  <div class="menuimage showsecond">
    <img src="https://i.imgur.com/ICs7TVH.jpg" />
  </div>
  <div class="menuimage showthird">
    <img src="https://i.imgur.com/n9gdy8N.jpg" />
  </div>
  <div class="menuimage showfourth">
    <img src="https://i.imgur.com/o87PUwV.jpg" />
  </div>
  <div class="menuimage showfifth">
    <img src="https://i.imgur.com/ICs7TVH.jpg" />
  </div>
</div>

https://jsfiddle.net/castordida/fwou1hvg/17/

我希望它始终显示最后一张图片并保留该图片，直到我将鼠标悬停在另一个链接上。

29/08/19 更新:

抱歉，我没有提到我正在使用的是在 wordpress 菜单中，所以不幸的是我使用了类而不是数据切换。我尝试向 wordpress 菜单添加数据切换失败。

Answer 1

有点脏，但应该可以；)

P.S:您可以忽略 .menu-item css，因为它只是为了美观。尽管其余的 CSS 很重要。

$('.menu-item').mouseenter(function() 
{
   var $this = $(this);
   var hover_elem_classes = $this.attr("class");
   var class_list;
   class_list = hover_elem_classes.split(" ");

   var currentImageClass="";
   for(var i in class_list)
   {
      var styleClass = class_list[i];
      if(styleClass.startsWith("show"))
      {
          currentImageClass = styleClass;
          break;
      }
   }
   
   
   var $activeImg = $(".menuimage."+currentImageClass);
   if(!$activeImg.hasClass("active"))
   {
      $(".menuimage.active").stop().fadeOut().removeClass("active");
      $activeImg.addClass("active").fadeIn();  
   }
});

.menuimage{display:none;position:absolute;}
.menu-item{padding:5px 10px;list-style-type:none;display:inline;text-transform:uppercase;}
.menuimage.active{z-index:10;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
  <ul>
    <li class="menu-item showfirst adasd adasd"><a href="root/first">first</a></li>
    <li class="menu-item showsecond zxczxc xczxczc"><a href="root/second">second</a></li>
    <li class="menu-item showthird fghfgh ghfgh"><a href="root/third">third</a></li>
    <li class="menu-item showfourth adasdg gfhfgh"><a href="root/fourth">fourth</a></li>
    <li class="menu-item showfifth zxczxc czxc"><a href="root/fifth">fifth</a></li>
  </ul>
</div>
<div class="col-6">
  <div class="menuimage active showfirst" style="display:block;">
    <img src="https://i.imgur.com/o87PUwV.jpg" />
  </div>
  <div class="menuimage showsecond">
    <img src="https://i.imgur.com/ICs7TVH.jpg" />
  </div>
  <div class="menuimage showthird">
    <img src="https://i.imgur.com/n9gdy8N.jpg" />
  </div>
  <div class="menuimage showfourth">
    <img src="https://i.imgur.com/o87PUwV.jpg" />
  </div>
  <div class="menuimage showfifth">
   <img src="https://i.imgur.com/ICs7TVH.jpg" />
  </div>
</div>