11

Answer can be in vanilla js or jQuery. I want to hide a div with the id "myDiv" if the user is no longer hovering over a link with the id "myLink" or a span with the id "mySpan". If the user has his mouse over either element "myDiv" will still show, but the second the user is not hover over either of the two (doesn't matter which element the user's mouse leaves first) "myDiv" will disappear from the face of existence.

In other words this is how I detect mouse leave on one element:

$('#someElement').mouseleave(function() {

   // do something

});

but how to say (in a way that will actually work):

$('#someElement').mouseleave() || $('#someOtherElement').mouseleave()) {

   // do something

});

How to detect this?

5 Answers 5

16

Something like this should work:

var count = 0;
$('#myLink, #mySpan').mouseenter(function(){
    count++;
    $('#myDiv').show();
}).mouseleave(function(){
    count--;
    if (!count) {
        $('#myDiv').hide();
    }
});

jsfiddle

3
  • Yup, exactly what I was thinking. And +1 for showing me that awesome site!
    – JohnP
    Feb 16, 2011 at 17:36
  • 1
    Though nice to look at, the count never gets updated out of the function scope. So it works like this: jsfiddle.net/2LNGx. ;) Luckily.
    – loveNoHate
    Jan 28, 2014 at 15:14
  • doesn't work for me what is working was to check the e.relatedTarget || e.toElement and use the closest selector so see if we have leaved or not.
    – bormat
    Dec 30, 2016 at 11:13
9

You could use a multiple selector:

$("#someElement, #someOtherElement").mouseleave(function() {
   // Do something.
});
5
  • 4
    Doesn't this just attach 2 separate events to these selectors? It's the same as calling them sequentially right? Or am I wrong? Wouldn't the method trigger if he hovered his mouse over element A after leaving element B? Which should not be the case.
    – JohnP
    Feb 16, 2011 at 16:08
  • Well, questioner used || (logical or), not logical and, and says it doesn't matter which element the user's mouse leaves first, so... my answer might be valid, but it's not clear :) Feb 16, 2011 at 16:13
  • I don't know how you made that fiddle work. i do a similar thing and get flickering behavior. :/
    – john k
    Nov 2, 2014 at 0:35
  • John I found the same your problem. That fiddle works cause loveNoHate used the same selectors for mouseenter and mouseleave! If you use only one of this selectors for mouseenter or the divs are not near, it flickers. Sep 14, 2017 at 9:39
  • The OP's question asks for a solution that will only hide an element/do something if the mouse has left both #element and #someOtherElement. @JohnP correctly points out in the comment above that this solution will hide the element/do something if the mouse leaves either #someElement or #someOtherElement. The behavior of this solution will not match what OP has asked for, where the element remains visible while either #someElement or #someOtherElement is hovered. So I would not recommend using this unless your use case is different than the OP's.
    – kenS
    May 13, 2020 at 20:11
3

You can beautifully use setTimeout() to give the mouseleave() function some "tolerance", that means if you leave the divs but re-enter one of them within a given period of time, it does not trigger the hide() function.

Here is the code (added to lonesomeday's answer):

var count = 0;
var tolerance = 500;
$('#d1, #d2').mouseenter(function(){
    count++;
    $('#d3').show();
}).mouseleave(function(){
    count--;
    setTimeout(function () {
        if (!count) {
            $('#d3').hide();
        }
    }, tolerance);
});

http://jsfiddle.net/pFTfm/195/

0
2

I think, it's your solution!!!

$(document).ready(function() {
    var someOtherElement = "";
    $("#someElement").hover(function(){
        var someOtherElement = $(this).attr("href");
        $(someOtherElement).show();
    });
    $("#someElement").mouseleave(function(){
        var someOtherElement= $(this).attr("href");
        $(someOtherElement).mouseenter(function(){
        $(someOtherElement).show();
        });
        $(someOtherElement).mouseleave(function(){
        $(someOtherElement).hide();
        });

    });
});

----
html
----
<div id="someElement">
                <ul>
                  <li><a href="#tab1">element1</a></li>
                  <li><a href="#tab2">element2</a></li>
        </ul>       
</div>

<div id="tab1" style="display: none"> TAB1 </div>
<div id="tab2" style="display: none"> TAB1 </div>
2

While the answer from lonesomeday is perfectly valid I changed my html to have both elements in one container. I originally wanted to avoid this hence I had to do more refactoring for my clients in other html templates, but I think it will pay out on the long term.

<div id="my-container">
 <div class="elem1">Foo</div>
 <div class="elem2">Bar</div>
</div>

$('#my-container').mouseleave(function() { console.log("left"); });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.