title: How to keep hover styling even after an element is clicked? (jQuery)
body: <p>I have four button elements that have hover styling (from 0.2 opacity to 1 opacity). And then, I am using jQuery so that after clicking the specific button, its opacity becomes 1 (sort of a marker that it's the clicked button) and the other unclicked buttons have an opacity of 0.2.</p>
  
  <p>However, after clicking, since I have forced every unclicked button to have opacity of 0.2, the css hover styling no longer works.</p>
  
  <p>I created a codepen demo below:</p>
  
  <p>jQuery:</p>
  
  <pre><code>var $box_each = $(".boxes img");
      $box_each.click(function() {
          $box_each.css("opacity", "0.2");
          $(this).css("opacity", "1");
      });
  </code></pre>
  
  <p><a href="http://codepen.io/aguerrero/pen/Bjzjrx" rel="nofollow">http://codepen.io/aguerrero/pen/Bjzjrx</a></p>
  
  <p>How do I resolve this issue so that the hover styling for all is retained while having just one element that has opacity of 1 at any given time?</p>