我有一个在悬停时隐藏/显示的 div。位置设置是绝对的,所以 div 的背景变得透明。如果 position 设置为 relative 则父 div 高度会在悬停时受到影响。那么背景如何才能阻止内容不可见。
需要css的解决方案。给出的样本->
$(document).ready(
function() {
$("#hover").hover(function() {
$("#message").toggle();
});
});Run Code Online (Sandbox Code Playgroud)
#message {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px #888888;
position:absolute;
display:none;
}Run Code Online (Sandbox Code Playgroud)
<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 …Run Code Online (Sandbox Code Playgroud)