Question

我创建了一个cotnst的div。 heigth和溢出的内容被隐藏了。但当我悬停它然后我想要显示所有内容。我做了一些JSFIDDLE，但所有下一个div都向下移动了。我想悬停div覆盖另一个divs悬停，但我不知道如何。请帮忙。

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;
}

Answer 1

您可以尝试以这种方式定位（绝对），它会响应它上面的div的位置，但是看看它下面的div的位置，以便它们可以重叠。

.container{
    position:absolute;
}

Answer 2

使用位置和 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;
}

如何让div在悬停时覆盖div？

2 个答案: