gpt4 book ai didi

html - CSS3 :not() selector, 处理包含的元素

转载 作者:太空宇宙 更新时间:2023-11-04 03:30:22 24 4
gpt4 key购买 nike

我将澄清移动到这篇文章的顶部:当鼠标没有悬停在某个 div 上时,我希望除此 div 之外的元素具有红色背景色。这可以通过本文中看到的 not() 选择器来实现吗? 问题似乎是,由于某个 div 在 body 元素内,鼠标将始终悬停在 body 元素上,即使它在某个 div 上,因此 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>

我想要的结果是,如果鼠标悬停在那些 div 之外的任何地方s, background-color 会变为红色(即悬停在 body 中)。

但是,由于那些 div s 在正文中,该选择器将始终处于事件状态。 body 永远是红色的。反正有没有风格那些 div让这不会发生?也许有 z-index 的东西?有什么线索吗?

最佳答案

仅靠 CSS 无法实现您正在尝试做的事情。

要实现这种效果——让主体在 :hover 时变红,但在悬停面板时不变——你必须取消面板上的指针事件冒泡。这只能使用 JS。

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

关于html - CSS3 :not() selector, 处理包含的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26428315/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com