Hover-Ereignis eines Div-Triggers auf Eltern Div verhindern?

Question

Wenn ich mouseover .mensal DIV wird es den Mouseover der Eltern .opera DIV auslösen, die mir falsch scheint. Ich will nur den "Highlight" -Effekt, um an dem Kind zu arbeiten .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 Definition über ein Kind schwebt, schwebt über dem auch Eltern. Es gibt keine "Blockierung" in HTML-Events.

Es gibt zwei Methodenketten, die Blase und das Capture.

Jede Veranstaltung im W3C-Event-Modell nimmt zuerst gefangen, bis sie das Element Ziel erreicht und dann wieder sprudelt.

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

Die einzige Möglichkeit, dies zu stoppen gehst ist das Sprudeln zu verhindern, indem Sie Javascript, um Ihre Seite Hinzufügen der Kette zu verhindern. Das ist einfach in jQuery

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

}); 

Es fällt mir ein, dass diese Antwort völlig nutzlos ist, wenn sie mit CSS zu tun. Javascript-Ereignisse befassen sich nicht mit CSS-Selektoren oder verhindern sie.

Leider weiß ich mit CSS allein keinen Weg, dies zu erreichen (und sogar in Javascript kann es schwierig werden). CSS 4 Selektoren können Sie das Thema des Wählers http://dev.w3.org/csswg/selectors4/#subject angeben, so dass Sie so etwas wie

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

aber dies ist nicht noch implementiert tun können, und ist noch in der Entwicklung für den Entwurf.

EDIT: Hier ist ein Javascript (jQuery) Implementierung, die für Sie

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

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

})​ 

und das modifizierte CSS

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

und der obligitory Arbeits Demo funktionieren sollte: http://jsfiddle.net/WB6Ty/