title: Make CSS hover element permanent onclick
body: <p>So I have created a little box with some CSS animation:</p>
  
  <pre><code>.boxtest 
  {
  width: 50px;
  height: 50px;
  background-color: green;
  opacity: .2;
  transition: opacity .8s, width .8s ease-out;
  -moz-transition: opacity .8s, width .8s ease-out;
  -webkit-transition: opacity .8s, width .8s ease-out;
  -o-transition: opacity .8s, width.8s ease-out;
  }
  
  .boxtest:hover {
  opacity: 1;
  width: 70%;
  }
  </code></pre>
  
  <p>What I'd like is for the CSS hover class to remain permanent after the user has hovered their mouse over the element.</p>
  
  <p>I guess you'd need to use Javascript, but I'm no expert so can't figure out the right command.  Any help would be awesome!</p>
  
  <p><a href="http://jsfiddle.net/r75gC/" rel="nofollow">http://jsfiddle.net/r75gC/</a></p>