Skip to main content
replaced http://stackoverflow.com/ with https://stackoverflow.com/
Fonte Link

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 cinzaEscala de cinza

Manter efeito hoverManter efeito hover

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

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

Fonte Link
carla
  • 630
  • 7
  • 13

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