在没有javascript的情况下在悬停div上设置body溢出（仅限css）

Question

我制作了一个菜单，弹出＆＃39;在javascript被禁用时悬停。但是这样工作正常，当菜单大到适合视口（窗口）时，菜单会显示一个滚动条。

当它在悬停时弹出时，有两个滚动条，一个窗口和一个菜单。看起来非常丑陋，可能会让用户感到困惑。

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

.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 */

菜单本身是固定的。我这样做的原因是为了确保菜单覆盖整个窗口因为高度：100％不想覆盖整个文档而且它非常难看。此外，搜索栏将始终可见。

如何达到我想要的效果？

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

Answer 1

使用当前的CSS规则无法做到这一点。您只能将规则应用于指定元素的子元素，而不是父元素。有关详细信息，请参阅https://stackoverflow.com/a/1014958/1034613。现在，您将不得不坚持使用Javascript。