pointer-events on a href Internet Explorer

Question

I saw ways to use pointer-events on SVG in Internet Explorer, but for a project I need to alter the a href's (pointer-events: none). How am I going to do this?

(I cannot alter the code, can only add CSS)

Thanks! :)

Answer 1

If you are trying to disable all the links in this menu then there is a CSS option involving an ::after pseudo-element on the li which overlays the anchor link.

The optimal solution would be javascript.

If you want to target a specific list item / anchor combo you could use the same technique using nth-child.

 li:nth-child (insert your number here)

Based on the structure given.

 #custom-nav-inner { display: inline-block; } #custom-nav-inner li { list-style-type: none; position: relative; /* positioning context */ } #custom-nav-inner li a { display: block; background: #bada55; padding:0.25rem 1rem; } #custom-nav-inner li a:hover { background: #f06d06; } #custom-nav-inner li::after { content: ''; position: absolute; top:0; left: 0; width: 100%; height: 100%; } 

 <div id="custom-nav-inner"> <ul> <li><a href="/">Home</a> </li> <li><a href="/the-device">The Device</a> </li> <li><a href="/musthaves.html">Musthaves</a> </li> </ul> </div>