css - 在没有 javascript 的悬停 div 上设置正文溢出(仅限 css)

Question

我制作了一个菜单，当禁用 javascript 时悬停时会“弹出”。然而，这工作正常，当菜单太大以适合视口(viewport)(窗口)时，菜单会显示滚动条。

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

在启用 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 */

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

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

图片(点击鼠标右键查看大图):

Answer 1

当前的 CSS 规则无法做到这一点。您只能将规则应用于指定元素的子元素，而不是父元素。参见 https://stackoverflow.com/a/1014958/1034613具体细节。目前，您必须坚持使用 Javascript。