mouseenter/mouseleave ignoring covering element

Question

It seems that the mouseenter/ mouseleave method is trigger not only when the mouse's coordinate enters the target's client rectangles, but also when another element uncover or cover the target. This is a problem because in my mouseenter callback, I want to display another element E on top of the target. I also want E to disappear upon mouseleave. You can think of this as a overlapping tooltip.

However, when I move my mouse onto the target, mouseenter is fired and element E will cover it. This coverage futher triggers a mouseleave event, so E will disappear. This further triggers a mouseenter event so E will appear again..... Which is quite a headache.

So basically, I am wondering whether there is a version of mouseenter/ mouseleave that only care about whether the mouse enters or leaves the client rectangles of the target, regardless whether the target is covered or not.

update: @arunopjohny created a JS fiddle to illustrate this problem. See comments

You can place the overlapping element as a descendant of the target, so that the mouseenter/mouseleave events will not get trigered — Arun P Johny, Feb 27 '14 at 02:39
The problem is that the target is inline whereas E is block level. Put E as descendant of the target will drive the browser crazy.. @ArunPJohny — user690421, Feb 27 '14 at 03:01
whether http://jsfiddle.net/arunpjohny/9fNcY/1/ shows your problem — Arun P Johny, Feb 27 '14 at 03:12
@ArunPJohny Exactly, thanks for creating that. As you can see, there is a short glitch as a sequence of (mouseenter, mouseleave, mouseenter) is fired, instead of a single mouseenter. — user690421, Feb 27 '14 at 03:30

score 9 · Accepted Answer · edited May 23 '17 at 12:25

9

Found perfect solution in a relevant question: Ignore mouse interaction on overlay image

The "pointer-events: none;" property will disable any mouse event of the element. More importantly, the event will instead "go through" to the element beneath it. Using this on the overlay element E in my question solves the problem.

edited May 23 '17 at 12:25

Community

1
1

answered Feb 27 '14 at 06:16

user690421

422
1
5
15

score 0 · Answer 2 · answered Feb 27 '14 at 03:39

0

Try

jQuery(function ($) {
    $('#target').hover(function () {
        var $target = $(this);
        clearTimeout($target.data('hoverTimer'));
        $('#e').show();
    }, function () {
        var $target = $(this);
        var timer = setTimeout(function () {
            $('#e').hide();
        }, 200);
        $target.data('hoverTimer', timer);
    });

    $('#e').hover(function () {
        clearTimeout($('#target').data('hoverTimer'));
    }, function () {
        $(this).hide();
    });
});

Demo: Fiddle

answered Feb 27 '14 at 03:39

Arun P Johny

384,651
66
527
531

This solved the problem when target and E has exactly the same position and size. But if E is larger than target, then it won't disappear when you move the mouse out of just the target. – user690421 Feb 27 '14 at 04:10
@user690421 can you help to recreate the problem in the fiddle – Arun P Johny Feb 27 '14 at 04:11
Yes. That illustrates the problem. But maybe it is the desired behavior on a second thought. – user690421 Feb 27 '14 at 06:01
@user690421 what is the desired behavior? – Arun P Johny Feb 27 '14 at 06:02
Solution found, as mentioned in my own answer. Thank you for the nice discussion. Here is the fiddle: http://jsfiddle.net/Up5jY/ – user690421 Feb 27 '14 at 06:18
The desired behavior is the E shall not interact with mouse event at all. It shall only show and hide and the mouse entering or leaving shall be solely dependent on target. – user690421 Feb 27 '14 at 06:21

mouseenter/mouseleave ignoring covering element

2 Answers2