Crea css: hover riguarda solo l'elemento padre

Question

In css, come posso interrompere l'evento :hover attivato in un elemento padre quando si verifica il passaggio di un evento figlio, in modo che venga attivato solo quando il genitore stesso si alza al volo? In questo caso il mio elemento figlio è in realtà posizionato all'esterno dell'elemento padre con posizionamento assoluto, quindi è un po 'strano quando il genitore cambia quando il bambino si alza.

Ho creato un JSFiddle per illustrare il problema.

Ecco uno JSFiddle della soluzione utilizzata nel mio esempio.

Answer 1

C'è una soluzione CSS puro (anche due in realtà), ma entrambi hanno un costo.

1. È possibile aggiungere eventi puntatore: nessuno; al tuo elemento figlio - ma non risponderà nemmeno ai propri stili di hover. Pointer-events sfortunatamente non sono supportati in IE sotto la versione 11 (http://caniuse.com/#search=pointer-events).

2. Avvolgere il contenuto dell'elemento padre (a prescindere dal figlio posizionato) in un altro (questo è il costo di questo metodo) e applicare gli stili di passaggio del mouse su questo wrapper.

Esempi di entrambi i metodi 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

Semplicemente: no nido tua #innerdiv all'interno. Piccola demo: little link. Nota che ho aggiunto:

html, body { 
    position: relative; 
} 

Che è necessario in questo caso.

Modifica: nel caso in cui si insista per averlo annidato, è necessario un po 'di JavaScript. Ecco un esempio:

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

(Questo sarebbe più breve se scritto usando jQuery, ma l'idea è la stessa).

Ecco una demo: little link.

Answer 3

È necessario utilizzare un po 'di JavaScript per interrompere l'evento da bubbling. Date un'occhiata a questo esempio:

css :hover only affect top div of nest