personalizado - mostrar texto al pasar el mouse css

CSS coloca el cursor sobre un div, pero no si coloca el mouse sobre sus hijos

Question

Miré si esta pregunta ya había sido respondida, pero no pude encontrar nada, solo preguntas sobre la regla inversa de CSS que estoy buscando.

Tengo un div que contiene uno o más hijos, y quiero que cambie su fondo al pasar el mouse, pero no si se desplaza uno de sus hijos; Necesito que la regla: hover se restrinja al elemento puro, no a los descendientes que contiene. Al no ser una regla principal en CSS, y al ser: se activa el mouse cuando el mouse pasa sobre el padre Y sus hijos, me encuentro sin ideas, y tal vez este resultado sea imposible de lograr con solo CSS. Sin embargo, la pregunta es sobre CSS, por lo que no se necesita una solución JS o JQuery (puedo proporcionarlo yo solo)

Gracias de antemano por cualquier idea o sugerencia

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;
    }

Answer 1

La capacidad de detener el efecto de desplazamiento de un elemento cuando el niño está suspendido no es posible actualmente con los selectores de CSS que tenemos, esto es lo más cerca que podemos obtener sin javascript, lo que afecta al elemento secundario al activarse además de afectar al elemento primario. Esto solo funcionará si el niño tiene el 100% del ancho y la altura del padre

¡En el borrador de CSS4 hay un selector de padres ! que podría usarse en casos como este de la siguiente manera:

.parent! .class1:hover {
   background: #ffffff;
}

Pero aún no tenemos esa capacidad

Answer 2

No se puede hacer eso con CSS puro, pero es fácil de lograr con jQuery. Por lo tanto, cuando pasas el cursor sobre un niño, no quieres modificarlo.

https://jsfiddle.net/8nqfLgsk/2/

$(".list-categories li a").hover( function(){

   $(this).toggleClass("active-btn");

});   

Básicamente con esto, solo está agregando una clase al elemento sobre el que está pasando, sin modificar el elemento principal.

Answer 3

Simplemente puede lograr esto agregando esta propiedad a la clase secundaria CSS.

pointer-events: none;

Esto funcionó para mí.

Answer 4

Violín basado en esta respuesta :

<style>
    .parent { padding: 100px; width: 400px; height:400px; position: relative; z-index: 998; }
    .parent:hover { background-color: green; }
    .child { padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000; }
    .child:hover { background-color: blue; }
    .parent-overwrite { padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none; }
    .child:hover ~ .parent-overwrite { display: block; }
</style>

<div class="parent">
    <div class="child">Child</div>
    <div class="parent-overwrite"></div>
</div>

Deberías ir con JavaScript en esto. Actualmente no es realmente posible con CSS puro, como ya dijo Zack Saucier.

Answer 5

En cada clase secundaria, solo agrega esta propiedad css:

cursor: pointer;