CODEWITHSUNDEEP
javascriptjquerymouseentermouseleave
Tommy
Tommy

Reputation: 850

jQuery mouseenter and mouseleave problems, keep toggled div shown

I have got 1 area, and on mouseenter I am fading in the following div:

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

Let's say the popup appears on the right hand side. What if the user leaves the area on the left hand side? Let's fade that popup out:

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

Here comes my problem: users should be able to move the cursor into the fresh opened popup to the right and maybe even click a link in there. My problem is that it fades out due to the mouseleave event on the area. One problem might be the fact that the popup is no child. As a child of the area hovering the popup would still count as being 'inside' the area I guess. So I am kind of trying to find out how to keep the popup visible when mouseentering it and mouseleaving the area. Here's the code:

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

Sry if I missed a question where this exact problem is being discussed.

jsfiddle here: fiddle

Upvotes: 1

Views: 940

Answers (2)

weeksdev
weeksdev

Reputation: 4355

You could manage what is visible in the hover instead of mouseenter and mouseleave:

Something like 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 is a fiddle demonstrating

Upvotes: 2

bitfhacker
bitfhacker

Reputation: 292

html

<div class="hasmore">hover me</div>
<div class="popup">Popup 1</div>

<div class="evenmore">stuff</div>
<div class="popup">2nd popup. don't mind me</div>

Javascript

 $( ".container" ).mouseenter(function() {
     $(".popup").stop().fadeIn();
 });

$( "div.container" ).mouseleave(function() {
    $(".popup").fadeOut();
});

CSS (include this)

.container {
    display: block;
    line-height: 1em;
    margin: 0;
    padding: 0;
}

The trick is to create a div (.container) with display: block and enclosure .hasmore and .popup inside it!

Upvotes: 1

Related Questions