title: How can a touch event have the same result as an hover effect on desktop?
body: <p>On a desktop the div with <code>class="content"</code> will be visible when hovering on the div with <code>class="button"</code>. There is also a callback so it automatically fades out when hovering somewhere else. </p>
  
  <p>But, this is not working on a mobile device because it is not possible to hover. I tried different solutions like adding other pseudo-classes (:active, :focus) and tried some JavaScript / jQuery. I also found this question <a href="https://stackoverflow.com/questions/8970280/how-to-simulate-hover-effect-on-touch-devices">How to simulate hover effect on touch devices?</a>. I think JS is the best way to solve this problem but I am not used to work with that. </p>
  
  <p>Here is my HTML code:</p>
  
  <pre><code>&lt;div class="home"&gt;
    &lt;div class="button"&gt;
      &lt;div class="content"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  .home {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3d2885;
    width: 100vw;
    height: 100vh;
  }
  
  .button {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 50vmin;
    height: 50vmin;
    background-color: white;
    border-radius: 50%;
  }
  
  .content {
    width: 0vmin;
    height: 0vmin;
    background-color: lightgreen;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
  }
  
  .button:hover .content {
    width: 25vmin;
    height: 25vmin;
    border-radius: 15%;
  }
  </code></pre>
  
  <p>And I tried some jQuery:</p>
  
  <pre><code>$('.button').bind('touchstart', function() {
          $(this).addClass('content');
  });
  
  $('.button').bind('touchend', function() {
          $(this).removeClass('content');
  });
  </code></pre>
  
  <p>Can anyone tell me how I can implement jQuery (or something else) so that a click event on a mobile device has the same effect as a hover effect on a desktop? 
  In this case I mean that the div with <code>class="content"</code> has a transition effect (growing) on clicking and a transition effect (shrinking) on clicking somewhere else. </p>
  
  <p>Codepen example: <a href="https://codepen.io/elinehendrikse/pen/JJVRLm?editors=0110" rel="nofollow noreferrer">https://codepen.io/elinehendrikse/pen/JJVRLm?editors=0110</a></p>