html - 悬停时更改 Y 位置

Question

我试图做到这一点，当您将鼠标悬停在 mother 或 sliding_child 上时，sliding_child 的位置会移动到 sliding_child 的下半部分。请注意，高度是母亲的两倍。

HTML

<div class="mother">
    <div class="sliding_child">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in risus accumsan, elementum ipsum id, molestie lorem. Suspendisse eu eros vitae ipsum consequat vehicula quis fermentum tortor.</p>
    </div>
</div>

CSS

div.mother {
    overflow: hidden;
    width: 200px;
    height: 300px;
}

div.sliding_child {
    width: 200px;
    height: 600px;
}

Answer 1

试试这个:-

div.mother {
width: 200px;
height: 300px;
border:1px solid black;
position : absolute;
overflow : hidden;
}

div.sliding_child {
width: 200px;
height: 600px;
position : relative;

}
div.sliding_child p{
height : 300px;
margin : 0px !important;
}
div.sliding_child p:first-child {
background : blue;
}
div.sliding_child p:nth-child(2) {
background : yellow;
}
div.sliding_child:hover {

顶部:-300px；