CODEWITHSUNDEEP
jquery
Husen
Husen

Reputation: 935

Stop Propagation is not working as expected when mouse over and out event execute several times

Stop Propagation is not working as expected when mouse over and out event execute several times.

Initially code is working perfectly. But, when user mouse over and out two-three times at once on test link at that time background shadow is not appearing.

Here is my code and FIDDLE LINK

JQUERY: 

$(document).on('mouseover mouseleave', ".link", function (ev) {
    $mouse_is_inside = ev.type;
    (($mouse_is_inside==="mouseover")?$("#backdrop").addClass("active").fadeIn(function(){
    }):$("#backdrop").fadeOut(function(){
        $(this).removeClass("active");
        ev.stopPropagation();
    }));            
});

HTML:

<div class="link">
   <a href="#" class="link"> Test </a>
</div>
<div id="backdrop"></div>

CSS:

#backdrop.active {
    background: rgba(0, 0, 0, 0.3);
    display: block;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
.link {
    background: #CCC;
    height: 300px;
    width: 300px;
    display: block;
    position: relative;
    z-index: 12;
}

Upvotes: 0

Views: 103

Answers (1)

lshettyl
lshettyl

Reputation: 8171

How about doing it with just CSS? Bear in mind that this would only work on modern browsers such as Chrome, FF, Safari and IE10+

    #backdrop {
        opacity: 0;
        transition: opacity 300ms ease-in;
        /* vendor prefixes :) */
    }
    .link {
        background: #CCC;
        height: 300px;
        width: 300px;
        display: block;
        position: relative;
        z-index: 12;
    }
    .link:hover + #backdrop {
        background: rgba(0, 0, 0, 0.3);
        opacity: 1;
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
    }

Demo@JSFiddle

Upvotes: 1

Related Questions