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 的规则，例如 div:hover { background-color: #000000 !important; }，这只影响事件的第一个父 div（当我悬停 divC 时，我希望 divC 的背景颜色变为黑色，但不影响 divB 或 divA 的背景颜色）......就像检查员在 Google Chrome 中所做的那样.

有任何想法吗？

4

4 回答 4

3

我不相信仅使用 CSS 就可以做到这一点，但你可以使用 JavaScript。

关键是event.stopPropagation()在mouseover事件上使用。

这是一个使用 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

你在寻找这样的东西吗？

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 回答
0

您是否因为 :hover 中的奇怪行为而考虑使用类似 .this 的东西？

  .mouseover(function(){
    $(this).addClass('selected');
  });
于 2013-06-25T21:45:43.013 回答
-4 
#divC:hover #divA { background-color: #FF0000 !important; }
#divC:hover #divB { background-color: #FFFF00 !important; }

也许黑客...... :)

于 2013-06-25T21:45:32.113 回答