悬停状态指针事件：无Javascript后备

Question

我有一个图像，后面有一个透明的部分，一个可以悬停的列表元素。图像必须位于list-element之上。这可以通过

来实现

pointer-events:none;

在图像上。

但是11以下的IE版本不支持此规则。我已经设法为点击事件找到了多个javascript解决方案，但是当只是将鼠标悬停在列表元素上时，这些解决方案都没有。

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

悬停NAV 3将弹出子菜单。当您将光标移动到位于其上方的图像区域时，子菜单将在IE中消失，因为IE不支持指针事件：无;

Answer 1

最好的方法可能是调用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!
  }
} );