Como podem ver no código abaixo, possuo 3 links com uma imagem em cada um deles, que direcionam para um iframe logo abaixo. Essas imagens estão em tons de cinza, mas ao passar o mouse sobre elas elas ficam coloridas graças a classe ".passo". Porém eu gostaria que o efeito que o hover faz ficasse permanente até que eu clique em outro lugar, é possível fazer isso apenas com html e css?
<a href="passo1.html" target="janela">
<img id="passo1" class="passo" src="img/passo_color1.png" style="float:left">
</a>
<a href="passo2.html" target="janela">
<img id="passo2" class="passo" src="img/passo_color2.png" style="left: 348px; float:left; position: absolute">
</a>
<a href="passo3.html" target="janela">
<img id="passo3" class="passo" src="img/passo_color3.png" style="left: 685px; float:left; position: absolute">
</a>
Abraços !!
onmouseover
na imagem que adicionasse o efeito colorido e outro eventoonclick
no body pra remover todas as classes.