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
- Seletores de Filho e Irmão no CSS-Tricks — Um guia abrangente sobre relacionamentos de elementos no CSS.
- MDN Web Docs - Pseudo-classe :hover — Guia oficial sobre como usar a pseudo-classe
:hover
. - 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.