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

【问题标题】：CSS or JS Rule for all Divs to Change BG Color of Div inside Div, Without Changing Parent Div所有 Div 的 CSS 或 JS 规则以更改 Div 内 Div 的 BG 颜色，而不更改父 Div
【发布时间】：2013-06-25 21:35:06
【问题描述】：

我知道这似乎微不足道，但我很难理解这一点。

<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 中所做的那样.

有什么想法吗？

【问题讨论】：

我认为这在 CSS 中是不可能的。对于 jquery 解决方案，请参阅 [stackoverflow.com/q/10364511/1926369]
这在 CSS 中绝对不可能还。如果你悬停一个孩子，你也自动地悬停其父级的定义。 CSS 工作组实际上正在制定目标规范，允许您在选择器链中指定父元素，但这还没有被任何浏览器实现（也没有很快计划）。
Some reading on the subject。我正在尝试查找当前正在运行的 W3 提案（与此处显示的语法大不相同）。
Here it is。建议用于 CSS4，目前语法共识似乎是parent! child，意思是“如果父元素中有子元素，则将此规则应用于父元素，因为它后面跟着! 字符”。这意味着 ! 默认为选择器的最后一个元素。加入后，您可以使用div! div:hover 来解决您的问题，但至少在 2015 年之前不会出现 CSS4。
我会继续发送垃圾邮件，因为人们似乎觉得它很有趣:) Current CSS4 working draft over at W3C 实际上将! 切换到主题元素的前面，就像!div div:hover。我认为这样可以避免混淆结构选择器链。

标签： javascript css hover mouseover

【解决方案1】：

我认为仅使用 CSS 是不可能做到这一点的，但你可以使用 JavaScript。

关键是在 mouseover 事件上使用 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')

})

【讨论】：

我会试试这个。看起来很有希望。测试后我会接受。
有前途吗？它完全符合您的要求。点击jsfiddle的链接
哈哈，好吧。给我一秒钟。

【解决方案2】：

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

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案4】：

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

也许是黑客... :)

【讨论】：

这些规则永远不会触发，因为#divA 和#divB 不是#divC 的后代元素。