JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<img class="cover_img" src="//placehold.it/100x100" />
<img class="hover_img" src="//placehold.it/101x101" />
<img class="hover_img" src="//placehold.it/102x102" />
<img class="hover_img" src="//placehold.it/103x103" />
<img class="hover_img" src="//placehold.it/104x104" />
<img class="hover_img" src="//placehold.it/105x105" />

CSS

.hover_img {display:none;]

JavaScript

var original = $('.hover_img').src;
var obj = $('.hover_img');
var arr = $.makeArray(obj);
var len = arr.length;
var indexNum = 0;

$(".cover_img").mouseover(
  function() {
      $(this).css("display", "none");
  $(arr[indexNum]).css("display", "block");
  }) ;
$(".hover_img").mouseout(
      function() {
  $(".cover_img").attr('src',original);
      $(".cover_img").css("display", "block");
      $(arr[indexNum]).css("display", "none");
      indexNum++;
      if (indexNum == len) indexNum = 0;
  }
);