所有Div的CSS或JS规则可更改Div内部的Div的BG颜色，而无需更改父Div

Question

I know it seems trivial, but I'm having some trouble wrapping my head around this.

<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>

What I need is a rule that applies to all divs, like div:hover { background-color: #000000 !important; }, that only affects the first parent div of the event (when I hover divC, I want the background color of divC to change to black, but not the background colors of divB or divA)... like the inspector does in Google Chrome.

Any ideas?

Answer 1

I don't believe it is possible to do this with just CSS, but you can with JavaScript.

The key is to use event.stopPropagation() on the mouseover event.

Here is an example using 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')

})

Answer 2

Are you thinking using something like .this because of an odd behavior in :hover?

  .mouseover(function(){
    $(this).addClass('selected');
  });

Answer 3

Are you looking for something like this ?

jQuery Solution:

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

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

Answer 4

#divC:hover #divA { background-color: #FF0000 !important; }
#divC:hover #divB { background-color: #FFFF00 !important; }

Maybe hacks... :)