title: pointer-events:none but capture click
body: <p>is it possible to allow only click and disable all other pointer-events</p>
  
  <p>top-layer has a search bar</p>
  
  <p>bottom-layer has a word cloud</p>
  
  <p>I have set <code>pointer-events:none</code> on top-layer, so all words in the word cloud can be hovered over even if they are below the search bar.</p>
  
  <p>but I want the click event on the input text to be enabled, so that when the user wants to type in something, he can.</p>
  
  <p><a href="https://i.stack.imgur.com/fSV7k.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fSV7k.png" alt="enter image description here"></a></p>
  
  <p><a href="https://jsfiddle.net/cob02bpv/" rel="noreferrer">Here is a related fiddle</a></p>
  
  <p>The text is behind the input, but it should be hoverable, 
  the input is above the text, but it should be focusable using mouse, to allow the user to type in.</p>
  
  <p>Note: it looks like a placeholder thing, but it is not. please see the original image to see what i am trying to achieve.</p>