避免绝对定位div的透明背景的CSS

Question

我有一个div，它在鼠标悬停时隐藏/显示。如果将位置设置为absolute，则div的背景变成透明。如果将位置设置为relative，则父div的高度会受到鼠标悬停的影响。那么如何使背景变成块状，以便内容不可见。

需要css解决方案。 给出示例->

$(document).ready(
    function() {
        $("#hover").hover(function() {
            $("#message").toggle();
        });
    });

#message {
    border: 1px solid;
    padding: 10px;
    box-shadow: 5px 10px #888888;
    position:absolute;
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"id="hover" >Click Here</a>
<div id="message">
  <b>Hidden Content</b>
  <br/>This is a very large content which overlaps the content at background.<br/><br/>So the content in background should not be seen.
</div>
<div>This is another text whose content should be hidden under the popup.</div><br/>
<div>One more text added whose content is visible even if the hidden content is visible.</div>

- Avinash Kumar

---

位置设置为绝对定位，因此div的背景变成透明。 - Temani Afif

为“#message”添加Z-index和background-color - 例如：Z-index:9，Background-color:#fff - Govind

背景颜色与绝对定位无关，无论定位如何，默认的背景颜色都是透明的。 - Huangism

需要解决CSS问题，而且不能使用jQuery。另外，您已经在一个非常简单的CSS任务中使用了jQuery。 - Temani Afif

@TemaniAfif：我尝试使用Angular，但它在这里无法工作。我的项目实现是基于AngularJS的。 - Avinash Kumar

Answer 1

我已经通过添加Z-index和背景颜色来更新您的代码。希望这正是您想要的。

$(document).ready(
    function() {
        $("#hover").hover(function() {
            $("#message").toggle();
        });
    });

#message {
    border: 1px solid;
    padding: 10px;
    box-shadow: 5px 10px #888888;
    position:absolute;
    display:none;
z-index:9;
background:#fff
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"id="hover" >Click Here</a>
<div id="message">
  <b>Hidden Content</b>
  <br/>This is a very large content which overlaps the content at background.<br/><br/>So the content in background should not be seen.
</div>
<div class="setPosition">This is another text whose content should be hidden under the popup.</div><br/>
<div>One more text added whose content is visible even if the hidden content is visible.</div>

- Govind

Answer 2

你需要一个白色背景。

另外，你可以相应地改变宽度。

编辑：你已经在使用jQuery =/

$(document).ready(
  function() {
    $("#hover").hover(function() {
      $("#message").toggle();
    });
  });

#message {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px #888888;
  position: absolute;
  display: none;
  background: #FFF;
  width: 90%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="hover">Click Here</a>
<div id="message">
  <b>Hidden Content</b>
  <br/>This is a very large content which overlaps the content at background.<br/><br/>So the content in background should not be seen.
</div>
<div>This is another text whose content should be hidden under the popup.</div><br/>
<div>One more text added whose content is visible even if the hidden content is visible.</div>

- trinaldi