html - CSS 隐藏与具有绝对位置的 div 重叠的 div 的内容

Question

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

那么背景如何做 block ，让内容不可见。

给定的样本:

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