Предотвращение события Hover для триггера Div на родительском Div?

Question

Когда я наводил указатель мыши .mensal DIV, он вызывает мышь родителя .opera DIV, что кажется мне неправильным. Я просто хочу, чтобы эффект «подсветки» работал над ребенком. .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

По определению, парит над ребенком, парит над родителем, а также. В html-событиях нет «блокировки».

Существует две цепи методов, пузырь и захват.

Любое событие, имеющее место в модели событий W3C, сначала фиксируется до , оно достигает целевого элемента и затем снова пузырится вверх.

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

Единственный способ вы собираетесь остановить это, чтобы предотвратить образование пузырьков, добавив JavaScript на свою страницу, чтобы предотвратить цепь. Это просто в JQuery

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

}); 

Это происходит со мной, что этот ответ совершенно бесполезен при работе с CSS. События Javascript не касаются селекторов CSS или их предотвращения.

К сожалению, только с помощью CSS я не знаю, как это сделать (и даже в javascript это может стать сложным). CSS селекторы 4 позволит определить предмет выбора http://dev.w3.org/csswg/selectors4/#subject так, что вы можете сделать что-то вроде

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

, но это разве реализуется еще и еще находится в стадии разработки для проекта.

EDIT: Вот Javascript (JQuery) реализация, которая должна работать для вас

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

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

})​ 

и модифицированный 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; 
}​ 

и с просился рабочей демо: http://jsfiddle.net/WB6Ty/