html - CSS避免绝对位置div的透明背景

Question

我有一个在悬停时隐藏/显示的 div。位置设置是绝对的，所以 div 的背景变得透明。如果位置设置为相对，则父 div 高度会在悬停时受到影响。那么背景如何做 block ，内容不可见。

需要 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>

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>