title: Hidden elements triggered onClick on mobile
body: <p>I have <code>div</code> and inside <code>button</code>s. Buttons are hidden (display only when <code>div</code> is on hover).</p>
  
  <p>Problem is that on mobile when I hit <code>div</code> in place where should be <code>button</code> it's triggered.</p>
  
  <p>I only want to display hidden elements on hit (on touch devices) not <code>button</code> click effect. </p>
  
  <p>I solved it by change <code>hover</code> to <code>active</code> class and JS functions: </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>const btn = document.querySelector('button');
  
  btn.addEventListener('click', function() {
    alert('aaa');
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.first {
    width: 300px;
    height: 300px;
    outline: 1px solid red;
  }
  
  .first .second {
    display: none;
    width: 20%;
    height: 20%;
  }
  
  .first:focus .second {
    display: block;
  }
  
  @media (min-width: 600px) {
    .first:hover .second {
      display: block;
    }
  }
  
  .btn {
    width: 100%;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="first"&gt;
    &lt;div class="second"&gt;
      &lt;button class="btn"&gt;click&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am looking for a better solution. Maybe some simpler using only css?</p>
  
  <p>Check on mobile and press top left corner, it trigger function</p>