show panel

by Trae

HTML

<span id="trigger">trigger</span>
<div id="panel">
    <ul>
        <li>item 1</li>
        <li>
            item 2
            <ul>
                <li>item a</li>
                <li>item b</li>
            </ul>
        </li>
        
    </ul>
</div>

CSS

#panel{
    display: none;
}

JavaScript

(function(){
    var status = 0;
    $("#trigger").on("mouseover", function(){
        $("#panel").show();
        status = 1;
        console.log("focus");
    });
    $("#panel").on("mouseover", function(){
        $("#panel").show();
        status = 1;
        console.log("focus");
    });
    $("#trigger").on("mouseout", function(){
        delayHide();
        status = 0;
        console.log("blur");
    });
    $("#panel").on("mouseout", function(){
        delayHide();
        status = 0;
        console.log("blur");
    });
    
    function delayHide(){
        setTimeout(function(){if(!status)$("#panel").hide();}, 500);
    }
})();