CODEWITHSUNDEEP
javascriptjquery
Lil Timmy O'Tool
Lil Timmy O'Tool

Reputation: 113

How to detect mouseleave() on two elements at once?

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?

Upvotes: 11

Views: 13888

Answers (5)

Julius S.
Julius S.

Reputation: 704

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/

Upvotes: 3

Hendrik
Hendrik

Reputation: 4939

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"); });

Upvotes: 2

Davide Puddu
Davide Puddu

Reputation: 21

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>

Upvotes: 2

lonesomeday
lonesomeday

Reputation: 238115

Something like this should work:

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

jsfiddle

Upvotes: 16

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 263157

You could use a multiple selector:

$("#someElement, #someOtherElement").mouseleave(function() {
   // Do something.
});

Upvotes: 9

Related Questions