Prevenzione dell'evento Hover di un trigger Div su Genitore Div?

Question

Quando passo il mouse su .mensal DIV si attiverà il mouseover sul genitore .opera DIV, che mi sembra sbagliato. Voglio solo l'effetto "highlight" per lavorare sul bambino .opera DIV.

#operaContent { 
 
    padding: 0 50px 0 50px; 
 
    position: relative; 
 
    overflow: visible; 
 
} 
 
#operaContent .opera { 
 
    display: block; 
 
    border: 1px solid #FFFFFF; 
 
    border-bottom: 1px solid #DDDDDD; 
 
    padding: 5px; 
 
    margin-bottom: 10px; 
 
    height: 120px; 
 
    background-color: #0A8ECC; 
 
} 
 
#operaContent .opera:hover { 
 
    border: 1px solid #AAAAAA; 
 
    background-color: #DDDDDD; 
 
    cursor: pointer; 
 
} 
 
.mensal { 
 
    position: absolute; 
 
    top: 1px; 
 
    left: 8px; 
 
    z-index: 3; 
 
    display: block; 
 
}

<div id="operaContent"> 
 
    <div class="opera"> 
 
    <div class="mensal"> 
 
     DIV 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Per definizione, in bilico su un bambino, aleggia sopra il genitore pure. Non c'è "blocco" in eventi html.

Esistono due catene di metodi, la bolla e l'acquisizione.

Qualunque evento che si svolge nel modello di eventi W3C viene dapprima catturata fino a raggiungere l'elemento di destinazione e poi bolle di nuovo.

http://www.quirksmode.org/js/events_order.html

L'unico modo in cui si sta andando a fermare questo è quello di prevenire il gorgogliare con l'aggiunta di javascript per la pagina per evitare che la catena. Questo è semplice in jQuery

$('.mensal').hover(function(e){ 
    e.stopPropagation(); 

}); 

Mi viene da pensare che questa risposta è del tutto inutile quando si tratta con i CSS. Gli eventi Javascript non si occupano dei selettori CSS o li prevengono.

Sfortunatamente, con il solo CSS, non conosco un modo per farlo (e anche in javascript può diventare complicato). CSS 4 selettori consentono di specificare il soggetto del selettore http://dev.w3.org/csswg/selectors4/#subject modo che si può fare qualcosa di simile

#operaContent .opera:hover! .mensal:not(:hover) { /*your css*/ } 

, ma questo non è ancora attuata, ed è ancora in fase di sviluppo per il progetto.

EDIT: Ecco un javascript (jQuery) implementazione che dovrebbe funzionare per voi

$(function(){ 
    $('.opera').hover(function() {$(this).addClass('hoverIntent')}, 
         function(){ $(this).removeClass('hoverIntent'); } 
        ); 

    $('.opera .mensal').hover(function() { 
     $(this).parent('.opera').removeClass('hoverIntent'); 
    }); 

})​ 

e il CSS modificato

#operaContent { 
    padding: 0 50px 0 50px; 
    position: relative; 
    overflow: visible; 
} 

#operaContent .opera { 
    display: block; 
    border: 1px solid #FFFFFF; 
    border-bottom: 1px solid #DDDDDD; 
    padding: 5px; 
    margin-bottom: 10px; 
    height: 120px; 
    background-color: #0A8ECC; 
} 


#operaContent .opera.hoverIntent { 
    border: 1px solid #AAAAAA; 
    background-color: #DDDDDD; 
    cursor: pointer; 
} 

.mensal { 
    position: absolute; 
    top: 1px; 
    left: 8px; 
    z-index: 3; 
    display: block; 
}​ 

e la obligitory lavoro demo: http://jsfiddle.net/WB6Ty/