悬停时显示另一个 div答案

【问题标题】：Display another div on hover悬停时显示另一个 div
【发布时间】：2019-03-22 05:39:25
【问题描述】：

当我将鼠标悬停在父 div 上时，如何展开默认隐藏的 div？附图中显示了类似的内容。

<div class="row text-center">
    <div class="col-md-6 border" style="height: 100px; padding-top: 25px;">
        <div class="firstDiv">
            <img src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/10/icon22@1x.png" />
            <br /> First div
        </div>

        <div class="expandDiv">Text</div>
    </div>

    <div class="col-md-6 border" style="height: 100px; padding-top: 25px;">
        <div class="firstDiv">
            <img src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/10/icon22@1x.png" />
            <br /> First div
        </div>

        <div class="expandDiv">Text</div>
    </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap hover

【解决方案1】：

快速而肮脏的实现（假设您在这里使用 Bootstrap）；我相信会有更好的。

.row-item {
    overflow: hidden;
}
.row-item img, .expandDiv {
    position: relative;
    transition: all 0.5s;
}

.expandDiv {
    top: 50%;
}

.row-item:hover img, .row-item:hover .expandDiv {
    transform: translate3d(0px, -200%, 0px);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center">
    <div class="col-md-6 border row-item" style="height: 100px; padding-top: 25px;">
        <img src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/10/icon22@1x.png" />

        <div class="expandDiv">Text</div>
    </div>
    <div class="col-md-6 border row-item" style="height: 100px; padding-top: 25px;">
        <img src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/10/icon22@1x.png" />

        <div class="expandDiv">Text</div>
    </div>
</div>

【讨论】：

【解决方案2】：

*{
box-sizing: border-box;
}
.border{
background:red;
text-align:center;
overflow:hidden;
border:1px solid black;
margin:10px;
}
.firstDiv, .expandDiv{
height:100px;
position:relative;
display: flex;
flex-direction:column;
justify-content: center;
flex-wrap: wrap;
align-content: center;
align-items:center;
transition: all .3s ease-out;
top:0;
padding:10px;
}
.firstDiv{

}
.border:hover .firstDiv{
 top:-100px;
}
.border:hover .expandDiv{
 top:-100px;
}

<div class="row text-center">
    <div class="col-md-6 border" style="height: 100px;">
        <div class="firstDiv">
            <img src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/10/icon22@1x.png" />
            <br /> First div
        </div>

        <div class="expandDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. ulla lobortis nibh urna</div>
    </div>

    <div class="col-md-6 border" style="height: 100px;">
        <div class="firstDiv">
            <img src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/10/icon22@1x.png" />
            <br /> First div
        </div>

        <div class="expandDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nibh urna, ac luctus nunc pellentesque ut. Nam sollicitudin urna est, a rhoncus magna tempor non.</div>
    </div>
</div>

这样的？内容在这里垂直和水平居中

【讨论】：

不需要很多这些自定义样式，因为我相当确定 OP 正在使用 Bootstrap 来处理行本身的创建和定位。

【解决方案3】：

如果您不想更改代码，这里是 css

.border{
    height:100px;
    width:100px;
    border:1px solid;
    overflow:hidden;
    position:relative;
}
.border:hover .firstDiv{
    top:-100%;
    transition:all 0.5s ease-in-out;
}
.border:hover .expandDiv{
    top:0;
    transition:all 0.5s ease-in-out;
}
.expandDiv,.firstDiv{
    top:0;
    height:100%;
    width:100%;
    position:absolute;
    transition:all 0.5s ease-in-out;
    text-align:center;
    padding:10px 0px;
}
.expandDiv{
    top:100%;
}

【讨论】：