javascript - 悬停状态指针事件:无Javascript后备广告

我有一个图像，在其透明部分的后面有一个可以悬停的列表元素。该图像必须在列表元素的顶部。这可以通过以下方式实现

pointer-events:none;

在图像上。

但是11以下的IE版本不支持此规则。我设法找到了多个用于单击事件的javascript解决方案，但是当将鼠标悬停在list元素上时，没有一个解决方案也起作用。

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

将鼠标悬停在NAV 3上会弹出一个子菜单。当您将光标移到其上方的图像区域时，由于IE不支持指针事件，因此该子菜单将在IE中消失。

最佳答案

最好的方法可能是调用DOM元素的getClientBoundingRects方法，该方法返回所讨论元素相对于视口的顶部，右侧，底部和左侧，然后将其与鼠标的位置进行比较。每当用户移动鼠标（通常！）时，该代码就会运行，因此我建议在执行pointer-events之前运行Modernizr测试，因为这可能会不必要地降低速度：

$( '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!
  }
} );