I am trying to override the pointer-events property for a containing div. It works in everything so far except IE 11. Supposedly, the pointer-events property was added to IE 11. For some reason, it won't override though.
.divstyle {
pointer-events: none;
}
.buttonstyle {
pointer-events: auto;
}
<div class="divstyle">
<table>
<tr><td>
<input type="button" class="buttonstyle" value="test">
</td></tr>
<tr><td>
<!-- A BUNCH OF CONTENT THAT I DON'T WANT TO HAVE POINTER EVENTS -->
</td></tr>
<tr><td>
<!-- AND ON AND ON -->
</td></tr>
</table>
</div>
The entire div doesn't allow pointer events, including the button. I would think since the div doesn't have the events at all, IE is supporting the property pointer-events, but when I explicitly set the child to have the events, it won't allow it for some reason. Thank you for your help!
I had the opposite problem in IE11, I was setting pointer-events: none
on a parent element, but a link inside that element was still responding to clicks! As it turned out, a span inside the link had position: relative
, which made it ignore the parent's pointer-events property.