title: How to add an onclick event to a element that already has a hover animation
body: <p>I have an animation that runs when hovered over, but since mobile devices cant really hover over buttons I am trying to add a click function.  I am having difficulties trying to add a click event to my already existing code.  </p>
  
  <p>So currently, the animation works by hovering over the Menu and buttons transition from behind it.  I am trying to have the same transitions animate when the Menu is clicked.  I have tried .getElementByID() but dont know which id's to put where to get it to work, or if I need to add a class in HTML or not. </p>
  
  <pre><code>&lt;div class="btn"&gt;
        &lt;button id="menu" type="button"&gt;&lt;h5&gt;Menu&lt;/h5&gt;&lt;/button&gt;
        &lt;div id="box"&gt;&lt;a href="info.html"&gt;&lt;button id="button-1" type="button"&gt;&lt;h4&gt;Info&lt;/h4&gt;&lt;/button&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div id="box-2"&gt;&lt;a href="about.html"&gt;&lt;button id="button-2" type="button"&gt;&lt;h4&gt;About Us&lt;/h4&gt;&lt;/button&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div id="box-3"&gt;&lt;a href="contact.html"&gt;&lt;button id="button-3" type="button"&gt;&lt;h4&gt;Contact&lt;/h4&gt;&lt;/button&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <pre><code>#menu:hover ~ #box{
    animation-name: myanimation;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: forwards;
    animation-fill-mode: forwards;
    animation-play-state: running;
  }
  </code></pre>
  
  <p>Any help that would improve my understanding of Javascript would be greatly appreciated, Thank You.</p>