title: Is there a `pointer-events:hoverOnly` or similar in CSS?
body: <p>Just been playing about with <code>pointer-events</code> property in CSS.</p>
  
  <p>I have a <code>div</code> that I want to be invisible to all mouse events, except for <code>:hover</code>.</p>
  
  <p>So all click commands go through the <code>div</code> to the one below it, but the div can report whether the mouse is above it or not still.</p>
  
  <p>Can anyone tell me if this can be done?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="layer" style="z-index:20; pointer-events:none;"&gt;Top layer&lt;/div&gt;
  &lt;div class="layer" style="z-index:10;"&gt;Bottom layer&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.layer {
      position:absolute;
      top:0px;
      left:0px;
      height:400px;
      width:400px;
  }
  </code></pre>