Question

我正在澄清这篇文章的顶部：当鼠标没有悬停在某个div上时，我希望除此div之外的元素具有红色背景颜色。可以使用not（）选择器实现这一点，如本文所示？ 困境似乎是因为某个div在一个body元素内，所以鼠标总是悬停在body元素上，即使它超过了某个div，因此body总是会有一个红色背景-color

当我将鼠标悬停在不在我选择范围内的元素上时，我试图使用not（）选择器来影响元素。

例如：

＆＃13;

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

＆＃13;

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

＆＃13;

我希望的结果是，如果鼠标悬停在那些div以外的任何地方，背景颜色将变为红色（即悬停在身体中）。

但是，由于那些div位于正文中，因此该选择器将始终处于活动状态。身体永远是红色的。无论如何要设计那些div的样式以便这不会发生吗？也许有z-index的东西？有线索吗？

Answer 1

请不要引用您的属性选择器。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

修改

困境似乎是因为某个div在一个body元素内，所以鼠标总是会悬停在body元素上，即使它超过了某个div，因此body总是会有一个红色背景-color

没有CSS父选择器，因此身体内元素上的事件对应用于身体的任何样式都没有任何发言权。

Answer 2

单独使用CSS无法实现您的目标。

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

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

CSS3：not（）选择器，解决包含的元素

2 个答案: