Question

我试图让它成为当你悬停母亲或者slide_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;
}

Answer 2

尝试在父项和子项上使用position: relative，在子项上使用top: -100%。还可以考虑在%中设置子项位置和维度，以便无论父项的大小如何都可以。

＆＃13;

html, body {
    position: relative;
    height: 100%;
    margin: 0;
    padding: .25rem;
    box-sizing: border-box;
}

.parent {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.child {
    position: relative;
    width: 100%;
    height: 200%;
    top: 0;
    transition: all linear .25s;
}

.child:hover {
    top :-100%;
}

.firstHalf,
.secondHalf {
    position: relative;
    height: 50%;
    padding: 1rem;
    box-sizing: border-box;
    color: white;
    font-family: Sans-Serif;
    font-size: 3rem;
}

.firstHalf {
    background: red;
}

.secondHalf {
    background: blue;
}

＆＃13;

<div class="parent">
    <div class="child">
        <div class="firstHalf">Hi</div>
        <div class="secondHalf">There!</div>
    </div>
</div>

＆＃13;

或者如果您更喜欢在父级而不是孩子身上使用:hover：

.parent:hover > .child {
    top: -100%;
}

在悬停时更改Y位置

2 个答案: