Hover state Pointer events:none Javascript fallback

Question

I have an image with behind a transparent part of it a list-element that can be hovered. The image has to be on top of the list-element. This can be achieved with

pointer-events:none;

on the image.

However IE Versions under 11 do not support this rule. I have managed to find multiple javascript solutions for on-click events, but none that also work when just hovering over the list element.

JsFiddle:http://jsfiddle.net/9Y9TH/2/

Hovering NAV 3 will give a pop-up sub-menu. When you move with your cursor to the image area, which is on top of it, the sub-menu will dissapear in IE as IE does not support pointer-events:none;

Answer 1

The best way is probably to invoke the getClientBoundingRects method of your DOM element, which returns the top, right, bottom and left of the element in question relative to the viewport, and then compare that to the mouse's position. This code will run whenever the user moves the mouse (often!), so I'd advise running a Modernizr test for pointer-events before executing it, as it could slow things down a fair bit unnecessarily:

$( 'body' ).on( 'mousemove', function isPositionedOnElement( mouseEvent ){
  var elementBox = yourElement.getBoundingClientRects();

  if (
    elementBox.top    <= mouseEvent.screenY &&
    elementBox.bottom >= mouseEvent.screenY &&
    elementBox.left   <= mouseEvent.screenX &&
    elementBox.right  >= mouseEvent.screenX
  ){
    // Your element is being hovered over!
  }
} );