Previniendo el evento de Desplazamiento de una Div desencadenando en Div principal?

Question

Cuando toco el mouse sobre .mensal DIV activará el mouse sobre el padre .opera DIV, lo cual me parece incorrecto. Solo quiero que el efecto de "resaltado" funcione en el niño .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

Por definición, flotando sobre un niño, revolotea sobre el padre también. No hay "bloqueo" en eventos html.

Hay dos cadenas de métodos, la burbuja y la captura.

Cualquier evento que tenga lugar en el modelo de evento W3C se captura por primera vez hasta alcanza el elemento de destino y luego vuelve a brotar.

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

La única forma en que vamos a parar esto es para evitar la formación de burbujas mediante la adición de JavaScript a su página para evitar que la cadena. Esto es simple en jQuery

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

}); 

Se me ocurre que esta respuesta es completamente inútil cuando se trata de CSS. Los eventos de Javascript no se ocupan de los selectores de CSS ni de prevenirlos.

Desafortunadamente, con CSS solo, no sé de una manera de lograr esto (e incluso en JavaScript puede ser complicado). CSS 4 selectores se le permiten especificar el sujeto del selector http://dev.w3.org/csswg/selectors4/#subject de modo que usted puede hacer algo como

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

pero esto no es aún implementado, y está todavía en desarrollo para el proyecto.

EDIT: Aquí es un Javascript (jQuery) aplicación que debería funcionar para usted

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

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

})​ 

y el CSS modificado

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

y la demo de trabajo obligitory: http://jsfiddle.net/WB6Ty/