SwiftHTML & CSSSolidityDesenvolvimento de JogosSolana/Rust
21.12.2024

Mudando o Estilo do Pai ao Passar o Mouse no Filho em CSS

Resposta Rápida

Usando apenas CSS, não é possível estilizar um elemento pai com base no evento de passar o mouse (hover) de um elemento filho. Para alcançar isso, um pouco de ajuda do JavaScript é necessária. Com JavaScript, podemos adicionar uma classe ao pai ao passar o mouse sobre o elemento filho. Aqui está um exemplo de como implementar isso:

// Com um toque de mágica, nosso pai recebe a classe "hovered"
document.querySelector('.child').addEventListener('mouseenter', function() {
    this.parentElement.classList.add('hovered');
});
// ...e como em um passe de mágica, a classe desaparece quando nosso cursor sai do elemento filho.
document.querySelector('.child').addEventListener('mouseleave', function() {
    this.parentElement.classList.remove('hovered');
});

E aqui está como podemos aplicar o estilo ao nosso elemento pai através do CSS:

.hovered {
    /* Transformações, transformações... */
    border: 2px solid blue;
}

Então, ao passar o mouse sobre o elemento filho, o pai recebe a classe .hovered. Quando o foco sai do elemento filho, a classe também é removida.

Seletores CSS Avançados

Embora o JavaScript faça um ótimo trabalho, o CSS também tem alguns truques na manga. Vamos dar uma olhada mais de perto neles:

Usando a Pseudo-classe :has

A pseudo-classe :has permite estilizar o elemento pai com base no estado do filho:

pai:has(> filho:hover) {
    /* Incrível transformação do pai */
    background-color: lightblue;
}

No entanto, tenha em mente que :has ainda não é suportada por todos os navegadores, como o Firefox. Não se esqueça de verificar a compatibilidade.

Usando Seletores de Irmãos e Posicionamento Absoluto

Vamos explorar o nobre mundo dos seletores de irmãos, utilizando posicionamento absoluto:

.pai {
    position: relative;
}
.irmao {
    /* Observação pacífica da irmandade */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.filho:hover + .irmao {
    /* Cavaleiro de armadura reluzente */
    border: 2px dashed red;
}

Dessa forma, você pode usar o "Seletor de Irmãos Adjuntos (+)" ou "Seletor de Irmãos Gerais (~)". Uma tática inteligente para resistir aos laços familiares!

Utilizando Cascatas

O CSS permite a criação de cadeias de dependências, formando uma ordem diversificada de estados:

.filho:hover {
    /* Elemento filho em foco */
}

.filho:hover ~ .irmao {
    /* Resposta do elemento irmão ao foco do filho */
}

Embora não haja um impacto direto no elemento pai, criamos uma influência mútua notável. Afinal, não se trata de força bruta, mas de estratégia.

Visualização

Visualmente, imagine o elemento pai como uma metrópole e o hover no filho como o momento de ação de um super-herói:

Aqui está o mapa dos heróis (🦸) e a metrópole (🏙️):
🏙️ Pai
  └── 🦸 Filho (Ganhando energia!)

Em um momento especial, o elemento filho se ilumina em foco, iluminando o pai.

pai:hover {}
filho:hover { pai { /* Modo cidade pacífica: pais ainda não brilham. */ } }

Lembre-se: Atualmente, não há como o CSS afetar diretamente o elemento pai através do evento de hover no filho. Mas usando JavaScript ou truques de CSS escolhidos de forma inteligente, efeitos impressionantes podem ser criados.

Recursos Úteis

  1. Seletores de Filho e Irmão no CSS-Tricks — Um guia abrangente sobre relacionamentos de elementos no CSS.
  2. MDN Web Docs - Pseudo-classe :hover — Guia oficial sobre como usar a pseudo-classe :hover.
  3. W3Schools - Como Fazer - Sobreposição de Imagem ao Passar o Mouse — Uma lição sobre como criar efeitos de hover para imagens com exemplos personalizados usando HTML e CSS.

Video

Did you like this article? Rate it from 1 to 5:

Thank you for voting!