替代“指针事件:无"的替代方案.在IE中? [英] Alternatives to "pointer-events:none" in IE?

问题描述

我有一个元素<span>，部分覆盖了另一个元素<div>.

I have an element <span> which partly covers another element <div>.

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

The div element has a hover state, so I have applied pointer-events: none !important; to the span so that the hover state remains active when the mouse is over the portion of the div that is covered by the span.

这在大多数浏览器中都很好-尽管不是在IE中:(

This works good in most browsers - Not in IE though :(

我正在尝试一些jQuery建议，以尝试将悬停状态保持在div元素上.可以执行以下操作:

I'm trying a couple of jQuery suggestions to try to keep the hover state on the div element. Something along the lines of this could work:

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

例如:悬停跨度时，模拟悬停div.

eg: When hover the span, emulate hover the 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上方，则模拟一个悬停.

(taken from here) eg: When hover the span, if the mouse is over the div, emulate a hover.

您有什么建议可以很好地工作吗?

Would you have any suggestions how this would work well?

推荐答案

好，因此，经过数小时在各地搜索错误答案后，我终于将其修复了，而且也不难.

Ok, so after many hours of searching through wrong answers all over the place, I finally fixed it... and it wasn't too hard either...

IE不像其他浏览器那样支持pointer-events.但是，它在以下情况下确实有效:

IE doesn't support pointer-events the same way other browsers do. However, it does work in the following situations:

1. 边框元素.指针事件:无作用于 元素(即边框:5px实线#000;).元素本身不会 让您单击它的后面，但是边框会.

1. border elements. pointer-events:none works on the borders of an element (i.e. border: 5px solid #000;). The element itself won't let you click behind it, but the border will.

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

SVG images. Images or backgrounds formatted as .svg will support the pointer-events:none.

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

In my problem, I was overlaying an image over a menu item to give a cool effect, shown below.

简而言之，每个li元素都有一个边框底. 跨度包含位于ul右侧的背景图片(以绿色突出显示-右上为橙色，左下为透明，以及两者之间的白线).这样可以使菜单倾斜25度，但实际上只是在图像下方继续显示.

In short, each li element has a border-bottom. The span contains a background image (highlighted in green - top right is orange, bottom left is transparent, and a white line between the two) which is positioned to the right side of the ul. This gives the effect that the menu is skewed at 25deg, but it actually just continues under the image.

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

I had to use pointer-events:none because when hover over 'our programmes', the sub-menu dissapears when the mouse moves over the li portion that is covered by the image/span.

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

Changing the image to .svg and using pointer-events:none allowed this method to work on IE. Most other browsers don't require the .svg part, but since they all support the file type it was not an issue.

这篇关于替代“指针事件:无"的替代方案.在IE中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！