jQuery - Fire 'mouseleave' event when mouse is not over two objects

Question

How do I fire the jQuery's

mouseleave

event when the mouse is NOT over elementA AND elementB ?

For a better understanding see example here.

Wrapping both of the elements in a containerC and fire the event from that is not an option, because I have elementA and elementB in two different table cells.

I'm not trying to make a multiple element selection (,). I'm traying to emulate the logical AND (&&). As above, the event must be fired when the mouse is neither over elementA nor elementB...

I hope you understand my question...

Answer 1

This will add a class mouse_over when mouse enters either of the elements. It will then check that there are no mouse_over elements when a mouseleave is detected. The setTimeout is required to allow the mouseenter to fire before the mouseleave and may require additional tweaking to eliminate race conditions

Working Fiddle

$('.myDiv, .myDiv1').mouseenter(function () {
    $(this).addClass('mouse_over')
})
$('.myDiv, .myDiv1').mouseleave(function () {
    $this = $(this)
    timeoutId = setTimeout(function () {
        $this.removeClass('mouse_over')
        if ($('.mouse_over').length == 0) {
            console.log('not_in_either');
        }
    }, 1);
});

Answer 2

As variant - set class for example "hovered" to div when mouseon, and remove it when mouseleave.

Then create function, that check elementA and elementB don't have "hovered" class, and if both true - do anything. Bind this function to elementA and elementB mouseleave event.

Answer 3

well i have updated your demo it should work on button click you can change according to your requirement.

here is the demo

$('.myDiv').mouseleave(function(){ console.log('out'); });
         $('input').click(function(){
              alert('a');
              $('.myDiv').trigger('mouseleave');
         });