title: CSS/HTML: Remove image filter on click
body: <p>I use some images as links on my site. When I hover the mouse over one of the images, they go from gray to color - and they go back to gray when the mouse is no longer hovering.</p>
  
  <p>I want the image to stay colorized when activated. Say I click the image, it should stay colorized until another link is clicked/activated.</p>
  
  <p>This is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p&gt;&lt;a href="privileged.php" target="testframe"&gt;
  &lt;img class="grayscale" height="67" src="powerlogo.png" width="303"&gt;
  &lt;/a&gt;&lt;/p&gt;
  &lt;iframe name="testframe"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>img.grayscale {
    filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ &amp; Safari 6+ */
  }
  
  a:hover img, a:focus img {
      filter: none;
      -webkit-filter: grayscale(0%);
  }
  </code></pre>
  
  <p>The above works as intended in Firefox, but not in Chrome and IE.</p>
  
  <p>What am I doing wrong?</p>