Question

我知道这似乎微不足道，但我在绕着这个问题缠绕时遇到了一些麻烦。

<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的背景颜色）...就像检查员在Google Chrome中所做的那样

有什么想法吗？

Answer 1

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

})

Answer 2

你是否正在考虑使用.this这样的东西，因为它有一个奇怪的行为：hover？

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

Answer 3

您是否在寻找this之类的内容？

jQuery解决方案：

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

也许黑客......：）

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

4 个答案: