8

DIVにマウス.mensalオーバーすると、親.operaDIV にマウスオーバーがトリガーされますが、これは間違っているようです。.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>

4

1 に答える 1

14

定義上、子の上にカーソルを置くと、親の上にもカーソルが移動します。HTML イベントには「ブロッキング」はありません。

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

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*/ }

しかし、これはまだ実装されておらず、ドラフトの開発中です。

編集：これはあなたのために働くはずのjavascript（jQuery）の実装です

</p> 

$(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/

于 2012-04-28T14:48:46.540 に答える