CSS3 :not() 选择器，处理包含的元素答案

【问题标题】：CSS3 :not() selector, working around contained elementsCSS3 :not() 选择器，处理包含的元素
【发布时间】：2014-12-13 05:33:34
【问题描述】：

我将澄清移到这篇文章的顶部：当鼠标没有悬停在某个 div 上时，我希望这个 div 以外的元素具有红色背景色。这可以通过本文中看到的 not() 选择器来实现吗？ 困境似乎是，由于某个div在body元素内，即使鼠标在body元素上，鼠标也会一直悬停在body元素上，因此body总是会有红色的背景色。

我正在尝试使用 not() 选择器在将鼠标悬停在不在我的选择范围内的元素上时影响元素。

例如：

    [data-panel] { background-color:white; }

    :not([data-panel=visible]):hover { background-color:red; }

<body>
  <div data-panel='visible'>
    <div data-panel='visible'>Content</div>
  </div>
</body>

我想要的结果是，如果鼠标悬停在divs 之外的任何地方，背景颜色将变为红色（即悬停在正文中）。

但是，由于这些divs 在正文中，因此该选择器将始终处于活动状态。身体永远是红色的。无论如何要对那些divs 进行样式设置，以免发生这种情况？也许有z-index 的东西？有什么线索吗？

【问题讨论】：

仅供参考，您应该使用data-panel，而不是panel，因为panel 不是有效的HTML 属性。
谢谢，我会调查的。

标签： html css

【解决方案1】：

单靠 CSS 是不可能做到的。

为了达到这个效果——让 body 在 :hover 时变成红色，但不是在悬停面板时——你必须取消在面板上冒泡的指针事件。这只能使用 JS。

顺便说一句，HTML5 有一个方法来定义自己的属性：the data-* attributes；例如data-panel="visible".

【讨论】：

正如您在代码 sn-p 中看到的，当将鼠标悬停在带有 Content 的 div 上时，body 仍然会变为红色。这是我问题的根源。
@ferr 嗯，我理解为目标行为；您可以通过仅针对其中的所有元素来排除主体标签（请参阅更新的答案）。但是你应该澄清你的问题并定义你的目标行为是什么......
这是我的“期望结果”。我会测试你的建议。谢谢
似乎不起作用。澄清一下：如果鼠标悬停在指定 div 之外的任何地方，则背景应该是红色的。
您不能在 CSS 中这样做，因为您必须禁用面板上指针事件的传递。

【解决方案2】：

不要引用你的属性选择器。

作为already mentioned by James; panel 不是有效的 HTML5 属性。您应该利用 HTML5 的 data-* 属性。

:not([data-panel=visible]):hover {
    background-color:red;
}

<div data-panel='visible'>
  <div data-panel='visible'>Content</div>
</div>

这当然会影响所有没有匹配属性的元素，包括 <body>，即当您悬停时整个页面的背景会变为红色。

编辑

困境似乎是由于某个div在body元素中，即使鼠标在某个div上，鼠标也会一直悬停在body元素上，因此body总是有红色背景色

没有 CSS 父选择器，因此正文中元素上的事件不能对应用于正文的任何样式有任何发言权。

【讨论】：

使用引号的错误，是直接输入。
我在这里没有看到我的问题的答案。单独使用 css3 是不可能的吗？