在悬停时设置正文溢出 div 没有 javascript（仅限 css）

Question

我制作了一个菜单，当 javascript 被禁用时悬停时 'popups'。然而，这工作正常，当菜单太大以适合视口时，菜单会显示滚动条 (window)。

悬停弹出时有两个滚动条，window 之一和菜单之一。看起来很丑，会让用户感到困惑。

启用 javascript 后，我将 .noscroll class 应用于正文，因此只有一个滚动条。

.noscroll { overflow:hidden !important; }

尝试仅使用 CSS 执行此操作但无法正常工作，尝试了以下几种方法：

.nav .panel:hover > body,
.nav .panel:hover > html {  overflow:hidden !important; } 
.nav .panel:hover #body { overflow:hidden !important; } /* body with id body */

菜单本身是固定位置的。我这样做的原因是确保菜单覆盖整个 window 因为 height:100% 不想覆盖整个文档而且它非常难看。此外，搜索栏将始终可见。

怎样才能达到我想要的效果？

图片（点击鼠标右键查看大图）：

Answer 1

当前的 CSS 规则无法做到这一点。您只能将规则应用于指定元素的子元素，而不是父元素。有关详细信息，请参阅。现在，您必须坚持使用 Javascript。

在悬停时设置正文溢出 div 没有 javascript（仅限 css）

set body overflow on hover div without javascript (css only)

css

popup

overflow

document-body