CODEWITHSUNDEEP
javascriptjqueryhtml
Bharat Soni
Bharat Soni

Reputation: 2902

mouse enter event is not working properly

Hi I am trying to hide a div on mouse enter on body, it is not working properly, the div I am trying to hide, will hide and comes again. Checkout this fiddle

Here is my code:

JS:

$(document).mouseenter(function() {
    $('.jadu').hide(10);
  }).mouseout(function(){
    $('.jadu').show(10);
  });

HTML:

<div class="jadu"></div>

CSS:

*{padding:0px;margin:0px;}
.jadu{
    position:fixed;
    width:100%;
    height:100%;
    background-color:#555;
    opacity:0.8;
    display:block;
    z-index:3;
}
body{
    background:red;
}

this is fiddle link: Fiddle

Upvotes: 1

Views: 853

Answers (4)

Ankit Gupta
Ankit Gupta

Reputation: 189

Visit: JsFiddle

/* Do not use equal time in hide and show: */

$(document).mouseenter(function() {
    $('.jadu').hide(100);
  }).mouseout(function(){
    $('.jadu').show();
  });

Upvotes: 0

Ekin
Ekin

Reputation: 1955

See the fiddle; http://jsfiddle.net/xibalbian/UaJZr/

$(document).mouseenter(function() {
  $('.jadu').hide(10);
}).mouseleave(function(){
  $('.jadu').show(10);
});

If the matched elements have no child element, both mouseout() and mouseleave() events are work exactly same.

If the matched elements have child element, both mouseout() and mouseleave() events are work different in the way of “event bubbling”.

You can see this page which explains clearly -> Difference between mouseout() and mouseleave()

Upvotes: 1

blex
blex

Reputation: 25634

Simply use the mouseleave event.

$(document).mouseenter(function() {
    $('.jadu').hide(10);
  }).mouseleave(function(){
    $('.jadu').show(10);
  });

JS Fiddle

When you use mouseout on an element and there is a child in it (document > .jadu) the mouseout event is triggered when you hover the .jadu element (child).

Using mouseleave, this event won't be triggered when you hover a child of document.

Upvotes: 3

Dave
Dave

Reputation: 4436

Use mouseleave event. jsfiddle

$(document).mouseenter(function() {
    $('.jadu').hide(10);
  });
$(document).mouseleave(function(){
    $('.jadu').show(10);
  });

Upvotes: 0

Related Questions