Make element unclickable (click things behind it)

Solution 1:

Setting CSS - pointer-events: none should remove any mouse interaction with the image. Supported pretty well in all but IE.

Here's a full list of values pointer-events can take.

Solution 2:

CSS Pointer Events is what you want to look at. In your case, set pointer-events to "none". Look at this JSFiddle for an example... http://jsfiddle.net/dppJw/1/

Notice that double clicking on the icon will still say you click the paragraph.

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
} 

Solution 3:

If you want to use JavaScript :

document.getElementById("x").style.pointerEvents = "none";

<a href="https://www.google.com" id="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" id="" />Clickable Google Link</a>