JSFiddle - React, Tailwind, and code Playground

by brianflanagan

HTML

<body>
    <a class="top-link-cart" href="http://www.w3schools.com/">Test</a>
    <div class="mask-layer">
        <div class="slidedown">
            div should close if user moves mouse away from test (but not to the gray area) or away from the gray area. The .mouseout function doesn't appear to work. 
        </div>
    </div>
</body>

CSS

.mask-layer {
    height:0;
    overflow:visible;
    position:absolute;
    top:32px;
    left:0px;
    z-index:999;
}

.slidedown {
    height:200px;
    width:300px;
    background:#454545;
    color:white;
    clear:both;
    display:none;
}

JavaScript

$(document).ready(function(){
    var dropTrigger = null;
    
    $('a.top-link-cart').hover(function(){
        // Remove the dropTrigger if it exists.
        if(dropTrigger != null){
            clearTimeout(dropTrigger);
            dropTrigger = null;
        }
        $('.slidedown').slideDown(1000);
    }, function(){
        // Set up the setTimeout
        dropTrigger = setTimeout(function(){
            $('.slidedown').slideUp(1000);
        }, 600);
    });

    $('.slidedown').hover(function(){
        // Remove the dropTrigger if it exists.
        if(dropTrigger != null){
            clearTimeout(dropTrigger);
            dropTrigger = null;
        }
    }, function(){
        dropTrigger = setTimeout(function(){
            $('.slidedown').slideUp(1000);
        }, 600);
    });
});