親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イベントには「ブロッキング」はありません。

バブルとキャプチャの2つのメソッドチェーンがあります。

W3Cイベントモデルで発生するイベントは、最初に までキャプチャされ、ターゲット要素に到達した後、再びバブルアップします。

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

あなたはこれを停止するつもりだ唯一の方法は、チェーンを防ぐために、あなたのページにJavaScriptを追加することにより、泡立ちを防ぐためです。 CSSを扱うときに、この答えは完全に役に立たないであることを私に起こるjQueryの

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

}); 

で簡単です。 Javascriptのイベントは、CSSセレクタを処理したり、それらを防ぐことはできません。

残念なことに、CSSだけでは、これを達成する方法がわかりません（javascriptでさえ厄介なことがあります）。 CSSセレクタ4は、あなたが

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

ような何かを行うことができますが、このありえないが、まだ実装、およびドラフトのためにまだ開発中であるように、あなたは、セレクタhttp://dev.w3.org/csswg/selectors4/#subjectの対象を指定することができます。

EDIT：http://jsfiddle.net/WB6Ty/：ここ はあなた

$(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; 
}​ 

とobligitory作業のデモのために働くべきではJavaScript（jQueryの）実装です