javascript - jQuery mouseenter and mouseleave problems, keep toggled div shown -

i have got 1 area, , on mouseenter fading in following div:

$( "area.hasmore" ).mouseenter(function() {   $(this).next(".popup").stop().fadein(); }); 

let's popup appears on right hand side. if user leaves area on left hand side? let's fade popup out:

$( "area.hasmore, .popup" ).mouseleave(function() {   $(".popup").fadeout();  }); 

here comes problem: users should able move cursor fresh opened popup right , maybe click link in there. problem fades out due mouseleave event on area. 1 problem might fact popup no child. child of area hovering popup still count being 'inside' area guess. kind of trying find out how keep popup visible when mouseentering , mouseleaving area. here's code:

<area class="hasmore" /> <div class="popup">... 

sry if missed question exact problem being discussed.

jsfiddle here: fiddle

you manage visible in hover instead of mouseenter , mouseleave:

something this:

$('div').hover(function () {     console.log(this.classname);     if (this.classname === 'hasmore') {         $(this).next(".popup").stop().fadein();     } else if (this.classname !== 'hasmore' && this.classname !== 'popup') {         $(".popup").fadeout();     } }); 

here fiddle demonstrating