Question

The reason why I want a <div> to highlight your choice is because the effect needs to be on many types of elements.

What I want to happen is that the highlight div will be ignored completely by mouse events.

The only way to do this as far as I know is by using trigger().

$('#hover').mouseenter(function(){
    // that refers to the element below it.
    $(that).trigger('mouseenter');
});

However, the hover highlight div itself gets activated by a mouseenter as well:

$('.item').bind('mouseenter.hover', function() {
    hoverEffect(this);      
})

Here is a jsfiddle.

How do I trigger all mouseenter events except for mouseenter.hover?

Or, how do I make a div being completely ignored by all mouse events? So it would just listen to the one below it.

Thank you for your time.

Answer 1

You can try to use the Pointer-Events css property like so:

#hover{
   pointer-events: none;
}

This will teach #hover to ignore the mouse events, and propagate them through itself, to the underlying element.

This has issues in some browsers, and might have unexpected side-effects. please use responsibly and after consulting the documentation.