How can I trigger a mouseout event for two elements in jQuery?

Question

Let's suppose I have two spearate divs, A and B, which overlap at a corner:

+-----+
|     |
|  A  |
|   +-----+
+---|     |
    |  B  |
    |     |
    +-----+

I want to trigger an event when the mouse leaves both A and B.

I tried this

$("#a, #b").mouseleave(function() { ... });

But this triggers the event if the mouse leaves either node. I want the event to be triggered once the mouse is not over either node.

Is there an easy way to do this? I had an idea that involved global variables keeping track of the mouse state over each div, but I was hoping for something more elegant.

I've seen this before. I think you can calculate the combined coordinates using .offset() for each #a, #b, and when the mouse position is no longer over the combined coordinates, $('#a, #b').trigger('mouseleave'); . — Jared Farrish
– Jared Farrish, Commented Dec 19, 2011 at 5:41
@JarredFarrish That sounds even worse that the solution I had in mind. Keeping track of the offset of the cursor can be pretty unwieldy. — Peter Olson
– Peter Olson, Commented Dec 19, 2011 at 6:12

adeneo · Accepted Answer · 2011-12-19 05:54:37Z

20

I encounter this problem all the time, and my 'quick fix' if it fits what I'm doing is the following;

var timer;

$("#a, #b").mouseleave(function() {
    timer = setTimeout(doSomething, 10);
}).mouseenter(function() {
    clearTimeout(timer);
});


function doSomething() {
    alert('mouse left');
}

Fiddle : http://jsfiddle.net/adeneo/LdDBn/

answered Dec 19, 2011 at 5:54

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Peter Olson Over a year ago

+2.5 That's pretty slick! I like how you only need one global variable and the process doesn't require as much finagling as the more obvious solutions.

Muhd Over a year ago

If you can position one of the elements absolutely, there is no need for a hack like this. See here.

adeneo Over a year ago

@muhd - position absolute has nothing to do with it, that's event propagation, which happens when you nest elements like that, but the answer was meant as an alternative to nesting, as that's not always possible.

Just code Over a year ago

Your quick fix seems to much quick solutions for me :)

Muhd · Accepted Answer · 2013-07-12 00:49:43Z

3

If you nest the second container inside the first there is no need for a complex jQuery solution:

http://jsfiddle.net/5cKSf/3/

HTML

<div class="a">
    This is the A div
    <div class="b">
        This is the B div
    </div>
</div>

CSS

.a {
    background-color: red;
    width: 100px;
    height: 100px;
    position: relative;
}

.b {
    background-color: blue;
    width: 100px;
    height: 100px;
    position:absolute;
    top: 50px;
    left: 50px;
}

JS

$('.a').hover(function() {
   alert('mouseenter'); 
}, function() {
   alert('mouseleave');
});

edited Jul 12, 2013 at 0:49

answered Jul 11, 2013 at 22:27

Muhd

25.8k22 gold badges66 silver badges79 bronze badges

Comments

techfoobar · Accepted Answer · 2011-12-19 05:51:22Z

0

I guess you can achieve this using something like:

var mouseLeftD1 = false;
var mouseLeftD2 = false;

$('#d1').mouseleave(function() {
  mouseLeftD1 = true;
  if(mouseLeftD2 == true) setTimeout(mouseLeftBoth, 10);
}).mouseenter(function() {
  mouseLeftD1 = false;
});

$('#d2').mouseleave(function() {
  mouseLeftD2 = true;
  if(mouseLeftD1 == true) setTimeout(mouseLeftBoth, 10);
}).mouseenter(function() {
  mouseLeftD2 = false;
});

function mouseLeftBoth() {
  if(mouseLeftD1 && mouseLeftD2) {
    // .. your code here ..
  }
}

answered Dec 19, 2011 at 5:51

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Collectives™ on Stack Overflow

How can I trigger a mouseout event for two elements in jQuery?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related