CSS隐藏div的内容，div由具有绝对位置

Question

我有一个隐藏/显示悬停的div。位置设置是绝对的，因此div的背景变得透明。如果position设置为relative，则在悬停时会影响父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。

＆＃13;

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

    #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;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;