0

O código abaixo tem quase o resultado que eu gostaria, entretanto o efeito só funciona em classes subsequente no caso do exemplo da classe dois para a três, a classe dois esta subsequente a um podem a um estar dentro de outra div, por isso não funciona.

Então a dúvida é, como fazer uma classe mudar o efeito de outra independente da ordem ou qual elemento elas estejam?

.um:hover ~ .dois{
  display: none;
}

.dois:hover ~ .tres{
  display: none;
}

.tres:hover ~ .um{
  display: none;
}

div {
  height: 50px;
  width: 50px;
}

.um {
  background: red;
}

.dois {
  background: green;
}

.tres {
  background: blue;
}
<div>
  <div class="um"></div>
</div>

<div class="dois"></div>
<div class="tres"></div>

3
  • Fazendo hover no Um vc não consegue atingir o Dois, não com CSS, com JS dá pra fazer. A não ser que seja vazendo o hover no Pai do Um, ai vc pega o Dois, mas acho que não é isso que vc quer.
    – hugocsl
    26/09/2019 às 17:28
  • Não e isso, creio que terei que implementar em JS mesmo. 26/09/2019 às 17:37
  • Sim nessa situação só com JS, pq o CSS não retrocede e tb não "vaza o escopo", tipo, o hover no Um não vai "vazar" da div pai e pegar na div Dois abaixo. Então só com JS mesmo, vou ver se te passo um exemplo
    – hugocsl
    26/09/2019 às 17:39

1 Resposta 1

0

Não sei se é a forma mais elegante de fazer isso, mas com o Script abaixo eu faço dois event-listeners um no mouseenter da div Um para esconder a Dois, e outro na div Dois para esconder a Tres, Já no mouseout eu faço um forEach para mostrar todas as divs Um, Dois e Tres

inserir a descrição da imagem aqui

const um = document.getElementsByClassName('um')[0];
const dois = document.getElementsByClassName('dois')[0];
const tres = document.getElementsByClassName('tres')[0];

um.addEventListener('mouseenter', doisSome);
dois.addEventListener('mouseenter', tresSome);

function doisSome() {
    dois.classList.toggle('esconde');
}

function tresSome() {
    tres.classList.toggle('esconde');
}

const todos = document.querySelectorAll('.todos');

todos.forEach((x) => {
    x.addEventListener('mouseout', () => {
        todos.forEach((el) => {
            el.classList.remove('esconde');
        })
    });
})
.esconde {
    opacity: 0;
}

div {
    height: 50px;
    width: 50px;
}

.um {
    background: red;
}

.dois {
    background: green;
}

.tres {
    background: blue;
}
<div>
    <div class="todos um"></div>
</div>

<div class="todos dois"></div>
<div class="todos tres"></div>

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 .