悬停时显示另一个 div

Posted 2023-05-08

【中文标题】悬停时显示另一个 div

【英文标题】：Display another div on hover

【发布时间】：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/[e-mail]" />
            <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/[e-mail]" />
            <br /> First div
        </div>

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

【参考方案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/[e-mail]" />

        <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/[e-mail]" />

        <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/[e-mail]" />
            <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/[e-mail]" />
            <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%;