JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<div id="show_stats1" class="stats">
    main, visible div
</div>


<div class="stat-1_info" style="display:none;">
    hidden div to be shown on hover
</div>

CSS

.stats{
  border:1px solid red;
}

.stat-1_info{
  border:1px solid blue;
  
}

JavaScript

document.getElementById("show_stats1").onmouseover = function() {mouseOver()};
document.getElementById("show_stats1").onmouseout = function() {mouseOut()};


function mouseOver() {
alert();
 $(".stat-1_info").css({ display: "block"}).animate({opacity: 1}, 200); });
}