Hacer css: el elemento emergente solo afecta al elemento padre

Question

En css, ¿cómo puedo detener el evento :hover que se desencadena en un elemento primario cuando un evento secundario está suspendido, de modo que solo se desencadena cuando el padre se queda suspendido? En este caso, mi elemento hijo está realmente ubicado fuera de su elemento principal con un posicionamiento absoluto, por lo que es un poco raro cuando el padre cambia cuando el niño queda suspendido.

Hice un JSFiddle para ilustrar el problema.

Aquí hay un JSFiddle de la solución utilizada para mi ejemplo.

Answer 1

Hay una solución css puro (incluso dos, de hecho), pero ambos tienen un costo.

1. Puede agregar eventos de puntero: ninguno; para su elemento hijo, pero tampoco responderá a sus propios estilos de desplazamiento. Pointer-events lamentablemente no son compatibles en IE debajo de la versión 11 (http://caniuse.com/#search=pointer-events).

2. Envuelva el contenido de su elemento primario (aparte del elemento secundario) en otro (este es el costo de este método) y aplique estilos de desplazamiento a este contenedor.

Ejemplos de ambos métodos here.

.parent-2, 
.parent { position:relative; background:#ddd; width:100px; height:100px; } 
.parent:hover { background:blue; } 
.child { position:absolute; top:0; left:130px; width:100px; height:50px; border:1px solid blue; pointer-events:none; } 
/* doesn't work in opera and ie */ 


.content { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;} 
.content:hover { background:blue; } 

Answer 2

Simplemente: no anide su #innerdiv dentro. Pequeña demostración: little link. Tenga en cuenta que agregué:

html, body { 
    position: relative; 
} 

Lo que es necesario en este caso.

Editar: en caso de que insista en tenerlo anidado, se necesita un poco de JavaScript. Aquí hay un ejemplo:

var inn = document.getElementById("inner"), outt = document.getElementById("holder"); 
outt.onmouseover = function() { 
    this.style.backgroundColor = "rgb(0, 162, 232)"; /*I like this color :)*/ 
} 
outt.onmouseout = function() { 
    this.style.backgroundColor = "orange"; 
} 
inn.onmouseover = function(ev) { 
    ev.stopPropagation(); 
} 

(Esto sería más corto si se escribe usando jQuery, pero la idea es la misma).

Aquí hay una demostración: little link.

Answer 3

Necesita usar un poco de JavaScript para evitar que el evento burbujee. Echar un vistazo a este ejemplo:

css :hover only affect top div of nest