On my website, I have a few images that serve as links. Normally, when I hover over one of these images with my mouse, it changes from grayscale to color; however, it reverts back to grayscale once the mouse is no longer hovering.
I want the image to remain in color even after clicking on it. If I click one image, it should stay colored until another link is clicked or activated.
Below is the code I am currently using:
HTML:
<p><a href="privileged.php" target="testframe">
<img class="grayscale" height="67" src="powerlogo.png" width="303">
</a></p>
<iframe name="testframe"></iframe>
CSS:
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
a:hover img, a:focus img {
filter: none;
-webkit-filter: grayscale(0%);
}
While this works correctly in Firefox, it does not have the desired effect in Chrome and IE.
What could be causing this issue?