title: CSS pointer-events: none while allowing hover
body: <p>I'm trying to create an element of top my page which can be hovered. When hovered I want to change the opacity of the element and allow click through.</p>
  <p>The thing is when I add the <code>pointer-events: none</code> to allow the click through, my hover is never triggered, which seems logic after all. I though I would be able to deal with it with JavaScript, but event <code>mouseover</code> or <code>mouseenter</code> is not compatible with <code>pointer-events: none</code>.</p>
  <p>Here is my example with only CSS: If I add the <code>pointer-events: none;</code> it doesn't work. The element is the <strong>red banner</strong>, I want to be able to click the buttons underneath while being able to lower the opacity of it.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {margin:0; padding:0;}
  .title {font-weight:bold;margin-right:10px;}
  .container {margin: 0 auto;width:80%;position:relative;overflow:hidden;}
  .content {height:300px;border: 1px solid #c8c8c8;}
  nav {background-color:#efebe0;padding:20px;}
  button {padding:10px;background-color:#9ebf00;border: 1px solid #86a200;border-radius:5px;margin: 0 5px 0 5px;}
  button.right {float:right;}
  
  .bandeau {
    position: absolute; 
    background: red none repeat scroll 0% 0%; 
    width: 300px; 
    height: 40px; 
    z-index: 2; 
    font-size: 30px; 
    color: white; 
    font-weight: bold; 
    text-align: center; 
    right: -70px; 
    transform: rotate(45deg); 
    top: 60px; 
    display: block;
    transition: 0.2s ease-in-out;
    pointer-events:none;
  }
  
  .bandeau:hover {
    opacity: 0.4;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;nav&gt;
      &lt;span class="title"&gt;Dummy Example&lt;/span&gt;
      &lt;button&gt;Home&lt;/button&gt;
      &lt;button&gt;Pricing&lt;/button&gt;
      &lt;button class="right"&gt;Contact us&lt;/button&gt;
      &lt;button class="right"&gt;Log in&lt;/button&gt;
    &lt;/nav&gt;
    &lt;div class="content"&gt;&lt;/div&gt;
    &lt;div class="bandeau"&gt;
      &lt;span&gt;I will be back !&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The other example with JavaScript:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener('DOMContentLoaded', function() {
    var bandeau = document.getElementById("bandeau");
    bandeau.addEventListener('mouseenter', e =&gt; {
      bandeau.style.opacity = '0.4';
      bandeau.style.pointerEvents = 'none';
    });
    bandeau.addEventListener('mouseleave', e =&gt; {
      bandeau.style.opacity = '1';
      bandeau.style.pointerEvents = 'auto';
    });
  }, false);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {margin:0; padding:0;}
  .title {font-weight:bold;margin-right:10px;}
  .container {margin: 0 auto;width:80%;position:relative;overflow:hidden;}
  .content {height:300px;border: 1px solid #c8c8c8;}
  nav {background-color:#efebe0;padding:20px;}
  button {padding:10px;background-color:#9ebf00;border: 1px solid #86a200;border-radius:5px;margin: 0 5px 0 5px;}
  button.right {float:right;}
  
  #bandeau {
    position: absolute; 
    background: red none repeat scroll 0% 0%; 
    width: 300px; 
    height: 40px; 
    z-index: 2; 
    font-size: 30px; 
    color: white; 
    font-weight: bold; 
    text-align: center; 
    right: -70px; 
    transform: rotate(45deg); 
    top: 60px; 
    display: block;
    transition: 0.2s ease-in-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;nav&gt;
      &lt;span class="title"&gt;Dummy Example&lt;/span&gt;
      &lt;button&gt;Home&lt;/button&gt;
      &lt;button&gt;Pricing&lt;/button&gt;
      &lt;button class="right"&gt;Contact us&lt;/button&gt;
      &lt;button class="right"&gt;Log in&lt;/button&gt;
    &lt;/nav&gt;
    &lt;div class="content"&gt;&lt;/div&gt;
    &lt;div id="bandeau"&gt;
      &lt;span&gt;I will be back !&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Is there a way to achieve this or is it impossible?</p>