CSS或JS规则适用于所有Div更改Div内部Div的BG颜色，而不更改父Div

CSS or JS Rule for all Divs to Change BG Color of Div inside Div, Without Changing Parent Div

本文关键字：Div 颜色 BG 内部 规则 JS 适用于 更改 CSS      更新时间：2023-09-26

我知道这看起来微不足道，但我很难理解这一点。

<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的规则，比如div:hover｛background-color:#000000！important；｝，它只影响事件的第一个父div（当我悬停divC时，我希望divC的背景色变为黑色，但不希望divB或divA的背景色）。。。就像谷歌浏览器中的检查员一样。

有什么想法吗？

我不认为只使用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')
})

你是不是因为悬停中的一个奇怪行为而考虑使用这样的东西？

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

你在找这样的东西吗？

jQuery解决方案： 

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

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

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

也许是黑客…：）

相关文章：