我有一个隐藏/显示悬停的div。位置设置是绝对的,因此div的背景变得透明。如果position设置为relative,则在悬停时会影响父div高度。那么如何阻止背景以便内容不可见。
需要css的解决方案。 给出的样本 - >
$(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>
答案 0 :(得分:3)
我已经通过添加Z-index和background-color更新了代码。希望这是你正在寻找的。 p>
$(document).ready(
function() {
$("#hover").hover(function() {
$("#message").toggle();
});
});
#message {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px #888888;
position:absolute;
display:none;
z-index:9;
background:#fff
}
<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 class="setPosition">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>
答案 1 :(得分:0)
你需要一个白色背景。
您也可以相应地更改宽度
编辑:你已经在使用jQuery = /
了
$(document).ready(
function() {
$("#hover").hover(function() {
$("#message").toggle();
});
});
#message {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px #888888;
position: absolute;
display: none;
background: #FFF;
width: 90%;
}
<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>