IE中“指针事件：无”的替代方案？

Question

我有一个元素<span>，它部分涵盖了另一个元素<div>。

div元素具有悬停状态，因此我已将pointer-events: none !important;应用于范围，以便当鼠标悬停在跨度覆盖的div部分上时悬停状态保持活动状态。

这在大多数浏览器中都很有效 - 但不是在IE中:(

我正在尝试一些jQuery建议，试图将悬停状态保持在div元素上。有些事情可行：

$("span").hover(
  function(){
    $("div").hover();
  }
);

例如：当悬停跨度时，模拟悬停div。

我也试过这个：

$("span").hover(passThrough);

function passThrough(e) {
  console.log("going");
    $("div").each(function() {
       // check if hovered point (taken from event) is inside element
       var mouseX = e.pageX;
       var mouseY = e.pageY;
       var offset = $(this).offset();
       var width = $(this).width();
       var height = $(this).height();

       if (mouseX > offset.left && mouseX < offset.left+width 
           && mouseY > offset.top && mouseY < offset.top+height)
         $(this).hover(); // force hover event
    });
}

（取自here）例如：当悬停跨度时，如果鼠标悬停在div上，则模拟悬停。

您对此如何运作有任何建议吗？

Answer 1

好的，所以经过几个小时的搜索错误答案后，我终于修好了......而且也不太难......

IE不像其他浏览器那样支持pointer-events。但是，它确实在以下情况下起作用：

1. 边框元素。指针事件：无效在边框上 元素（即border：5px solid＃000;）。元素本身不会 让你点击它后面，但边框会。

2. SVG图片。格式为.svg的图片或背景将支持指针事件：无。

在我的问题中，我将图像覆盖在菜单项上以产生很酷的效果，如下所示。

简而言之，每个li元素都有一个border-bottom。 跨度包含背景图像（以绿色突出显示 - 右上角为橙色，左下角为透明，两者之间为白线），位于ul的右侧。这会产生菜单偏向25度的效果，但它实际上只是在图像下继续。

我不得不使用指针事件：无，因为当鼠标悬停在“我们的程序”上时，当鼠标移动到图像/跨度覆盖的li部分时，子菜单会消失。

将图像更改为.svg并使用指针事件：none允许此方法在IE上工作。大多数其他浏览器不需要.svg部分，但由于它们都支持文件类型，因此不存在问题。