在没有javascript的悬停div上设置正文溢出（仅限css）答案

【问题标题】：set body overflow on hover div without javascript (css only)在没有javascript的悬停div上设置正文溢出（仅限css）
【发布时间】：2015-03-29 23:11:23
【问题描述】：

我制作了一个菜单，当禁用 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 */

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

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

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

【问题讨论】：

body 怎么可能是您导航的孩子？你能发布你的html吗？

标签： css popup overflow document-body

【解决方案1】：

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

【讨论】：