我创建了最漂亮的div。高度和内容溢出被隐藏。但是，当我将其悬停时，我想显示所有内容。我做了一些JSFIDDLE，但所有下一个div向下移动。我想悬停的div会在悬停时覆盖另一个div，但我不知道如何操作。请帮忙。
html
<div class="header">
</div>
<div class="container">
<div class="content">
</div>
<div class="button">
<button>
Button
</button>
</div>
</div>
<div class="space">
</div>
<div class="footer">
</div>
的CSS
.header
{
background-color: violet;
height: 40px;
}
.container{
background-color: orange;
width: 400px;
}
.content{
background-color: lightblue;
height: 100px;
overflow: hidden;
}
.content:hover {
overflow: visible;
height: auto;
}
.button{
background-color: lightgreen;
text-align: center;
height: 30px;
}
利用如下的position和z-index属性-
更改两个CSS类
.container{
background-color: orange;
width: 400px;
position : relative;
/* height same as that of content. Needed to avoid the jump effect */
height : 100px;
}
.content:hover {
overflow: visible;
position : absolute;
height : auto;
z-index:999;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句