CODEWITHSUNDEEP
jquery
user3633186
user3633186

Reputation: 1540

jQuery if hover / if not anymore

i have ve a little JS Script. If i hover over an "a" Element the div.overlay is showing. But how can i say "if i am not anymore on the a Element set the display:block to none; ?

$(function() {

    var docHeight = $(document).height();

    $("body").append("<div id='overlay'></div>");

    $(".navbar-default .navbar-nav a").hover(function() {
       $("#overlay")
            .height(docHeight)
            .css({
                'display': 'block',
                'top': 80,
        });
    });

});

My css for this div 

.overlay {
  display: none;
  z-index: 98;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.5);
}

Upvotes: 0

Views: 74

Answers (1)

Satpal
Satpal

Reputation: 133453

Signature of .hover() is

$( selector ).hover( handlerIn, handlerOut )

Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

Hide your div in the handlerOut(A function to execute when the mouse pointer leaves the element.), In the handlerOut function you can use $("#overlay").hide(); to hide the element.

Use

$(".navbar-default .navbar-nav a").hover(function () {
    $("#overlay")
        .height(docHeight)
        .css({
            'display': 'block',
            'top': 80,
        });
}, function () {
    $("#overlay").hide();
});

Upvotes: 1

Related Questions