1

些細なことのように思えますが、これに頭を悩ませています。

<div id="divA" style="width: 400px; height: 400px; background-color: #FF0000;">
    <div id="divB" style="float: left; width: 200px; height: 200px; background-color: #FFFF00;">
        <div id="divC" style="float: left; width: 100px; height: 100px; background-color: #FF00FF;">
        </div>
    </div>
</div>

div:hover { background-color: #000000 !important; のように、すべての div に適用されるルールが必要です。}、それはイベントの最初の親divにのみ影響します（divCにカーソルを合わせると、divCの背景色を黒に変更しますが、divBまたはdivAの背景色は変更しません）...インスペクターがGoogle Chromeで行うように.

何か案は？

4

4 に答える 4

3

CSS だけでこれができるとは思えませんが、JavaScript を使えば可能です。

キーは、マウスオーバーイベントで使用するevent.stopPropagation()ことです。

jQuery を使用した例を次に示します: http://jsfiddle.net/K96DS/2/

$('div').on('mouseover', function(){

    $(this).addClass('hovered')

    // this is the key, this stops te mouover event
    // from bubbling up to the parent elements
    event.stopPropagation(); 

}).on('mouseout', function(){

    $(this).removeClass('hovered')

})
于 2013-06-25T21:50:51.320 に答える
0

:hover の奇妙な動作のために .this のようなものを使用することを考えていますか?

  .mouseover(function(){
    $(this).addClass('selected');
  });
于 2013-06-25T21:45:43.013 に答える
0

このようなものをお探しですか？

jQuery ソリューション:

$('div').each(function(){
    $(this).on({
        mouseover:function(){
          $(this).css('background-color','black');  
        },
        mouseout:function(){
          $(this).css('background-color','');  
        }
    });          
});

http://jsfiddle.net/j8ebE/2/

于 2013-06-25T21:50:26.357 に答える
-4 
#divC:hover #divA { background-color: #FF0000 !important; }
#divC:hover #divB { background-color: #FFFF00 !important; }

多分ハック... :)

于 2013-06-25T21:45:32.113 に答える