3

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 !!

4
  • Diego podes fazer um jsFiddle como exemplo? Assim fica mais fácil de testar e vais ter ajuda mais rápido.
    – Sergio
    Commented 7/08/2015 às 23:02
  • Cara sou iniciante, não faço ideia do que é JsFiddle Commented 8/08/2015 às 3:35
  • jsfiddle.net inclua seus códigos html/css/js (se tiver) nos campos destinados e salve, gerando um link que possa ser compartilhado Commented 8/08/2015 às 12:46
  • @Sergio eu criaria um evento onmouseover na imagem que adicionasse o efeito colorido e outro evento onclick no body pra remover todas as classes. Commented 8/08/2015 às 12:47

1 Resposta 1

3

Bem, eis um exemplo do que eu entendi que você quer: JSFiddle

Não ficou claro pra mim o "outro lugar" que é necessário clicar para que o estado hover saia, então fiz apenas um modelo que mantém o estado hover (usando a propriedade transition-delay) colorindo uma imagem em escala de cinza.

.passo {
  filter: gray; /* IE6-9 */
  filter: grayscale(1); /* Firefox 35+ */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */     
  transition:0s 180s;
}

.passo:hover {
  filter: none;
  -webkit-filter: grayscale(0);
  transition:0s;
}

Referências:

Escala de cinza

Manter efeito hover

2
  • Aparentemente é isso mesmo. Esse exemplo funciona caso tenha mais imagens? Commented 8/08/2015 às 19:12
  • 1
    Claro: jsfiddle.net/nr6LpLqb/2
    – carla
    Commented 9/08/2015 às 2:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .