CSS pairar em uma div, mas não se pairar sobre seus filhos [duplicado]
Esta pergunta já tem uma resposta aqui:
Como aplicar child: hover, mas não parent: hover 5 respostasProcurei se essa pergunta já havia sido respondida, mas não consegui encontrar nada, apenas perguntas sobre a regra css reversa que estou procurando.
Eu tenho uma div que contém um ou mais filhos e quero que ele mude seu plano de fundo ao passar o mouse, mas não se passar o mouse sobre um de seus filhos; Eu preciso que a regra: hover seja restrita ao elemento puro, não aos filhos que ela contém. Não sendo uma regra pai em CSS e sendo: passe o mouse acionado sempre que o mouse passa sobre o pai E seus filhos, fico sem ideias e talvez esse resultado seja impossível de alcançar apenas com CSS. No entanto, a pergunta é sobre CSS, portanto, nenhuma solução JS ou JQuery é necessária (eu posso fornecer isso sozinha)
Código:
HTML
<div class="parent">Text of the parent
<p class="class1">I do not need to trigger parent's background color change!</p>
</div>
CSS
.parent {
background: #ffffff;
}
.parent:hover {
background: #aaaaff;
}
.class1 {
margin: 10px;
}