JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="content">
  <span class="shown">This stays by default</span>
  <span class="show-hover">This shows on hover</span>
  <span class="showing">This shows on click for half second and then hides...</span>
</div>

CSS

.show-hover, .showing {
  display: none;
}
.content:hover .show-hover {
  display: block;
}
.content:hover .shown {
  display: none;
}
.content span {
  cursor: pointer;
}
.content {
  float: left;
  height: 30px;
  line-height: 30px;
  background: lightblue;
}

JavaScript

$(document).ready(function(){
    $('.content').on('click', function(){
    $(".showing").show();
      $('shown').hide();
      $('.show-hover').hide();
    setTimeout(function(){
      $(".showing").hide();
    }, 500);
  });
  $('.content').mouseover(function(){
    $('.show-hover').show();
    $('shown').hide();
  }).mouseleave(function(){
     $('.show-hover').hide();
    $('shown').show();
  });
})