Alternatives to “pointer-events:none” in IE?

Question

I have an element <span> which partly covers another element <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.

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

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();
  }
);

eg: When hover the span, emulate hover the div.

I also tried this:

$("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
    });
}

(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?

Answer 1

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 doesn't support pointer-events the same way other browsers do. However, it does work in the following situations:

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.

2. 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.

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.

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.

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.