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

Question

我有一个 div 悬停在 hide/display 上。位置设置是绝对的，因此 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

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

Answer 2

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

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

CSS hide the content of a div overlapped by a div with absolute position

html

css

popup

angularjs

twitter-bootstrap-3