JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div id="has_hover_function">
    Search Something.
    <div id="will_slideDown" style="display:none; height:50px; margin-left:-1px;">
        <input type="text" id="txt1" value="" style="width:100px;" /> 
    </div>
</div>

CSS

#has_hover_function, #will_slideDown
{
 position:relative;
 width:150px;  
   height:25px;
    font-family:Arial;
    text-align:center;
    padding-top:3px;
   border:1px solid gray;
   background-color:#e7e7e7;
}

#will_slideDown
{
    position:absolute;
    top:100%;
    left:0px;
    border-top:0px;
}

JavaScript

$(document).ready(function() {
    
    $("#has_hover_function").hover(function() {
        if($('#will_slideDown').is(':animated')){
            return false;
        }
           $("#will_slideDown").slideToggle("normal");
    }); 
});