0

Tenho a seguinte classe no CSS:

.iconQuemSomos {
    cursor: pointer;
    margin: 0 15px;
    transition: all 0.3s ease;
}
.iconQuemSomos:focus {
    opacity: 1;
    position: absolute;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);

}
.iconQuemSomos:not(:focus){
    visibility: hidden;
}

O que estou tentando fazer é com que o objeto que estiver com a classe e que for selecionado no foco, possa ocorrer uma animação enquanto os demais objetos semelhantes, sumam da tela. O problema é que o CSS é carregado antes de qualquer interação do usuário, com isso, os objetos dessa classe que inicialmente não estarão com foco, já irão aparecer na tela "desaparecidos". Pensei em usar JS, mas infelizmente não o domino muito bem ainda, alguém tem alguma ideia de como posso resolver?

Estou tentando fazer algo do tipo:

.iconQuemSomos:not(:focus) img:not(:active){
    visibility: hidden;
}

uma vez que o HTML está assim:

    <a class="iconQuemSomos" href="#">
     <img class="img-fluid" style="height: 150px" src="assets/img/icos/Icone_Quemsomos.png">
   </a>
4
  • Não sei como fazer isso com css, teria de fazer alguns testes, mas acho que isso deve ajudar como alternativa: css-tricks.com/hover-on-everything-but clique em "View Demo" 1/08/2018 às 16:30
  • Cara mas se quando vc clicar em um vc quer esconder os outros, como vc vai poder clicar em outra opção depois? Uma vez que vc clicar em qq link ele vai animar, mas os outros vão esconder correto? Ai se os outros vão estar escondidos como vc vai poder clicar neles depois?
    – hugocsl
    1/08/2018 às 17:12
  • No momento que eu clicasse em qualquer outro canto da tela, iria tirar o foco do objeto selecionado e retornaria os demais ao estado padrão. Seria sumir se não estiver no foco mas teria que ter uma verificação antes para saber se há algum no foco. Caso nenhum esteja no foco, então todos os objetos ficariam visíveis. Acho que teria que ser por JS mesmo... até por essa verificação. 1/08/2018 às 17:27
  • Use document.querySelectorAll(".iconQuemSomos")[0].focus(); para forçar o foco no primeiro elemento da coleção.
    – Sam
    1/08/2018 às 17:32

0

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

Pesquise outras perguntas com a tag .