CSS隐藏与绝对位置的div重叠的div的内容

Question

我有一个在悬停时隐藏/显示的 div。位置设置是绝对的，因此 div 的背景变得透明。如果位置设置为相对，则父 div 高度在悬停时会受到影响。

那么如何让背景遮挡，让内容不可见。

给出的样本：

$(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

没有 jQuery。

#hover {
	position: relative;
}

#hover:hover > #message {
	opacity: 1;
	margin-left: calc(100% + 20px);
}

#message {
	width: 100px;
	margin-left: 50%;
	padding: 10px;
	background: #8E8EF2;
	position: absolute;
	transition: .5s all ease;
	transform: translateY(-50%);
	color: #fff;
	opacity: 0;
	left: 0;
	top: 50%;
}

#message:before {
	content: "";
	position: absolute;
	border: 10px solid transparent;
	border-right: 10px solid #8E8EF2;
	transform: translateY(-50%);
	left: -20px;
	top: 50%;
}

<a href="#" id="hover">
	Hover me, please
	<div id="message">
		<b><u>I am here</u></b>
	</div>
</a>

Answer 2

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

    #message {
        display: none;
        max-width: 300px;
        position: relative;
        margin: 18px 0;
        padding: 18px 20px;
        background-color: #eef4f9;
        /* easy rounded corners for modern browsers */
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
    }
     #message::after {
        content: " ";
        display: inline-block;
        position: absolute;
        top: -10px;
        left: 20px;
        margin: 0;
        border-top: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #eef4f9;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="hover">Hover me</a>

<div id="message">
  <b><u>I am here</u></b>
</div>