0

我有一个<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
    });
}

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

你有什么建议可以很好地工作吗？

4

1 回答 1

2

好的，所以经过数小时在各地搜索错误答案后，我终于修复了它......而且也不是太难......

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

  1. 边框元素。 pointer-events:none 作用于元素的边框（即边框：5px solid #000;）。元素本身不会让你点击它，但边框会。

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

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

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

我不得不使用pointer-events:none，因为当将鼠标悬停在“我们的程序”上时，当鼠标移到图像/跨度覆盖的li部分时，子菜单就会消失。

将图像更改为 .svg 并使用 pointer-events:none 允许此方法在 IE 上运行。大多数其他浏览器不需要 .svg 部分，但由于它们都支持文件类型，所以这不是问题。

在此处输入图像描述

于 2013-08-30T12:12:04.873 回答