懸停時更改Y位置

Question

我正在嘗試使其懸停在母體或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;
}徘徊時，關於兒童的父母和孩子，並top: -100%都使用position: relative

Answer 2

嘗試。也可以考慮在%中設置孩子的位置和尺寸，以便這可以適用於父母的任何尺寸。

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

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

或者如果你喜歡在父母，而不是孩子使用:hover：

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