JSFiddle - React, Tailwind, and code Playground

by Gabriel

HTML

<div class="foo">foo</div>
<div class="hiddenFoo"><a href="#">Simple</a></div>

CSS

.foo{background: #999; padding: 10px; width: 100px;}
.hiddenFoo{background: #FC0; padding: 20px; height: 50px; width: 200px; float:left;
position:absolute; border: 1px solid red;}

JavaScript

$(document).ready(function()
{
   $('.hiddenFoo').hide();
   //
   $('.foo').mouseover(function()
   {
      $(this).next($('.hiddenFoo')).fadeIn(300);
   });
   $('.hiddenFoo').mouseout(function()
   {
      $(this).fadeOut(300);
   });
    
});