mouseenter/mouseleave ignoring covering element

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

Answers


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.


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


Need Your Help

A real life example when pattern matching is more preferable than a case expression in Haskell?

haskell functional-programming pattern-matching

So I have been busy with the Real World Haskell book and I did the lastButOne exercise. I came up with 2 solutions, one with pattern matching

What does X-Cache: Hit from Backend mean?

php http http-headers symfony xcache

I looked all over the internet but can't seem to find out what this means. I think it might be the cause of an error I'm currently getting in which the page refuses to update its references to cer...