JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div>
  <a href="#" class="relative onhover-toggle-child-class" data-target=".target2" data-toggle="shown">Show Image
    <span class="absolute animated target2 animated on-top hidden">
      <img src="http://placehold.it/150x150" alt="image" />
    </span>
  </a>
</div>

<div class="row" style="position: relative; top: 50%; bottom:50%">
  <a  href="#" class="relative onhover-toggle-child-class" data-target=".target2" data-toggle="shown">Show Image
    <span class="absolute animated target2 on-top animated hidden">
      <img src="http://placehold.it/150x150" alt="image" />
    </span>
  </a>
</div>

CSS

a span {
  display: block;
}


.on-top {
  z-index: 99;
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

.animated {
  transition: opacity 1s ease;
}

.hidden.shown,
.shown {
  opacity: 1;
  height: auto;
  overflow: visible;
}

.hidden {
  opacity: 0;
  height: 0;
  overflow: hidden;
}

JavaScript

$('.onhover-toggle-child-class').on(
	'mouseenter mouseleave',
  function() {
    var element = $(this);
    var selector = element.data('target');
    var child = element.find(selector);
    var classes = element.data('toggle');


    child.toggleClass(classes);
  }
);
/*
var queried = document.querySelectorAll('.onhover-toggle-child-class');
var elements = Array.prototype.slice.call(queried);
var onhover = function(event) {
	var element = event.srcElement || event.target;
	var selector = element.getAttribute('data-target');
  var classes = element.getAttribute('data-toggle').split(' ');
  var childs = element.querySelectorAll(selector);
  console.log(selector, classes, childs);
  childs.forEach(function(child) {
  	classes.forEach(function(toggleClass) {
    	if (child.classList.contains(toggleClass))
      	child.classList.remove(toggleClass);
       else
       	child.classList.add(toggleClass);
    });
  });
}

elements.forEach(function(element) {
	element.addEventListener('mouseenter', onhover);
  element.addEventListener('mouseleave', onhover);
});*/