Question

我正在使用一个内部工具，它迫使我将HTML div嵌套在其他几个中。这是令人讨厌的基于GUI的网络编辑器之一，但我需要将它用于工作。我正试图在加载时淡化页面的整个背景。

这是我的问题：

基本上，我有：

<div class="ThisDivIsForcedUponMe">
   ...content...
  <div class="ThisWrapperToo">
     ...content...
     <div id="hover"> //the div I want to work with -- the ONLY place I can put HTML
     </div>
     <div id="content">
       <p>content</p>
     </div>
  </div>
</div>

我的JS：

<script>
  $(document).ready(function(){

  $("#hover").click(function(){
        $(this).fadeOut();
    $("#popup").fadeOut();
    });

  $("#close").click(function(){
        $("#hover").fadeOut();
    $("#popup").fadeOut();
    });

}）;

正如你从codepen中看到的那样，我的“悬停”div上面的div导致了我的问题 - 它们不会被我的CSS变暗，因为宽度100％只填充其直接父级：

#hover{
  position:fixed;
  background:#000;
  width:100%;
  height:100%;
  opacity: .6
}

请记住，我无法更改我的HTML，如何让我的悬停div填充页面上的所有内容？

感谢。

Answer 1

您未指定#hover的左侧和顶部坐标;这就是为什么他们从哪里开始＆＃34;这是另一个烦人的部分＆＃34;段落结束而不是从身体的顶部。只需添加它们：

#hover{
  position:fixed;
  background:#000;
  width:100%;
  height:100%;
  opacity: .6;
  left: 0;
  top: 0;
}

Pen

Answer 2

CODEPEN

我在您的top:0; CSS中添加了#hover。我发现在使用position规则时明确定位（顶部，左侧，底部等）会很有帮助。

结果是弹出窗口的黑色半透明背景现在覆盖了整个页面 - 我希望这是对你所要求的正确解释。

Answer 3

您可以在悬停div上使用margin-top，其值为负值

设置嵌套div以填充所有父项

3 个答案: