title: CSS Class Reverts to Not Active
body: <p>I am adding a class to an image. </p>
  
  <pre><code>.bbbLink img { 
      outline: 1px solid #ddd;
      border-top: 1px solid #fff;
      padding: 10px;
      background: #f0f0f0;
  }
  </code></pre>
  
  <p>On hover I add this,</p>
  
  <pre><code>.bbbLink img:hover { 
      background-color: rgba(0, 0, 0, 0.1);
      outline: 1px solid #ddd;
      border-top: 1px solid #fff;
      padding: 10px;
      background: #f0f0f0;
  }
  </code></pre>
  
  <p>For active I am doing this,</p>
  
  <pre><code>.bbbLink img:active {
      outline: 1px solid #111 !important;
      border-top: 1px solid #555 !important;
      padding: 10px !important;
      background: #333 !important;
  }
  </code></pre>
  
  <p>Since I am adding the active class to an image and you cannot do this because it is a self closing element I am using jquery to handle adding the active state like this,</p>
  
  <pre><code>&lt;script&gt;
  (function($) {
  $('.bbbLink').click(function() {
      $(this).toggleClass('active');
  });
  })( jQuery );
  &lt;/script&gt;
  </code></pre>
  
  <p>Everything works perfectly, even when checking the dom after clicking the element my active class appears. </p>
  
  <pre><code>&lt;a id="wrapbbb" class="bbbLink active" href="img.jpg" target="_blank"&gt;
  &lt;img src="content/uploads/-2-018.jpg" alt="BBB"&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>The problem is that when I press the mouse down and click, active state shows and the styling takes effect but when I release the click the active state styling goes away... </p>
  
  <p>The active class is still in the dom but the styling effects revert back to the class without the active state. </p>
  
  <p>Why is this happening?</p>