CSS pasa el mouse sobre un div, pero no si pasa el mouse sobre sus hijos [duplicado]
Esta pregunta ya tiene una respuesta aquí:
Cómo aplicar child: hover pero no parent: hover 5 respuestasMiré si esta pregunta ya había sido respondida, pero no pude encontrar nada, solo preguntas sobre la regla de CSS inversa que estoy buscando.
Tengo un div que contiene uno o más elementos secundarios, y quiero que cambie su fondo al pasar el mouse, pero no si se pasa el cursor sobre uno de sus elementos secundarios; Necesito que la regla: hover se restrinja al elemento puro, no a sus descendientes que contiene. Al no ser una regla principal en CSS, y ser: activarse cada vez que el mouse pasa sobre el padre Y sus hijos, me encuentro sin ideas, y tal vez este resultado sea imposible de lograr solo con CSS. Sin embargo, la pregunta es sobre CSS, por lo que no se necesita una solución JS o JQuery (puedo proporcionarla yo mismo)
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;
}