JSFiddle - React, Tailwind, and code Playground

by archanamahesan

HTML

<div class="aa">
<a href="javascript:alert(5);" class="bb">Test</a>
<div class="cc">
<p>
Testing1
</p>
<p>
Testing2
</p>
</div>
</div>

CSS

.cc{
  opacity:0;
  display:none;
}
.aa:hover .cc {
  display:block
}

JavaScript

$('body').on("mouseenter",".aa",function(){
        if( $('.aa').length  && $(window).width() > 1024) {
            $(this).find('.cc').animate({top: '+=10', opacity: 1}, 50);
        } else{
        alert(5);
            return false;
        }
    });
    $('body').on("mouseleave",".aa",function(){
        if( $('.aa').length  && $(window).width() > 1024) {
            $(this).find('.cc').animate({top: '-=10', opacity: 0}, 300);
        }
    });