Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Efeito :hover de um elemento filho para um elemento pai, ou para um elemento qualquer

Minha dúvida é: Se nesse caso abaixo, eu posso usar o [:hover] ou qualquer outra forma de estilização em que, quando eu passar o mouse pelo [.elementoFilho] ocorra alguma modificação nos elementos [.elementoPai] e [.elementoQualquer] somente usando CSS, sem precisar usar JS.

<body>
<div>
    <ul class="elementoPai">
        <li class="elementoFilho"></li>
        <li class="elementoFilho"></li>
        <li class="elementoFilho"></li>
    </ul>
    <img class="elementoQualquer" src="" alt="">
</div>

<br>

<div>
    <img class="elementoQualquer" src="" alt"">
</div>
</body>
1 resposta
solução!

Oi Bruno, tudo bem?

Desculpe a demora em retornar.

Sim, é possível usar o seletor :hover em CSS para aplicar modificações nos elementos pai e qualquer usando apenas CSS, sem a necessidade de JavaScript.

No seu exemplo, você pode utilizar o seletor :hover na classe .elementoFilho para aplicar estilos nos elementos .elementoPai e .elementoQualquer quando o mouse passar por cima dos elementos filhos. Aqui está um exemplo de como fazer isso:

.elementoPai:hover,
.elementoQualquer:hover {
  /* Estilos que serão aplicados nos elementos pai e qualquer quando o mouse estiver sobre os elementos filhos */
  /* Por exemplo, alterar a cor de fundo */
  background-color: yellow;
}

Neste caso, quando você passar o mouse sobre um dos elementos com a classe .elementoFilho, a cor de fundo dos elementos .elementoPai e .elementoQualquer será alterada para amarelo.

Você pode ajustar os estilos conforme necessário para atender às suas necessidades. Lembre-se de adicionar esse código CSS no lugar apropriado, como em uma tag <style> dentro do cabeçalho <head> do seu documento HTML ou em um arquivo de estilo externo que esteja sendo referenciado corretamente no seu HTML.

Um abraço e bons estudos.