1

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

pointer-events:none;

在图像上。

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

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

悬停 NAV 3 会弹出一个子菜单。当您将光标移动到位于其顶部的图像区域时，子菜单将在 IE 中消失，因为 IE 不支持 pointer-events:none;

4

1 回答 1

1

最好的方法可能是调用getClientBoundingRectsDOM 元素的方法，该方法返回相关元素相对于视口的顶部、右侧、底部和左侧，然后将其与鼠标的位置进行比较。每当用户移动鼠标时（通常！），此代码都会运行，因此我建议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!
  }
} );
于 2013-12-03T19:18:00.803 回答