jQuery addClass example

Change class name on click in jQuery

HTML

<div>
 <div class="hidden"><img src="https://via.placeholder.com/150"></div>
  <a class="onhover-toggle-child-class" data-target=".target" data-toggle="hidden shown">Words
   <span class="target hidden">
    <div>Title</div>
   </span>
  </a>
 </div>

CSS

.hidden {
  display: none;
}

.shown {
  display:block;
}

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