Html 悬停时更改Y位置

我试图使它，当你悬停在母亲或滑动的孩子，滑动的孩子的位置移动到滑动的孩子的下半部分。请注意，高度是母亲的两倍长

HTML

试试这个：-

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

---

}

当鼠标悬停时，尝试在父对象和子对象上使用

position:relative

，在子对象上使用

top:-100%

。还考虑在“代码> %%/COD>”中设置子位置和维度，这样无论父大小是多少，都可以工作。

html，正文{
位置：相对位置；
身高：100%；
保证金：0；
填充：.25rem；
框大小：边框框；
}
.家长{
位置：相对位置；
宽度：100%；
身高：100%；
溢出：隐藏；
}
.孩子{
位置：相对位置；
宽度：100%；
身高：200%；
排名：0；
过渡：全部线性。25s；
}
.孩子：悬停{
前-100%；
}
.上半场，
.下半场{
位置：相对位置；
身高：50%；
填充：1rem；
框大小：边框框；
颜色：白色；
字体系列：无衬线；
字体大小：3rem；
}
.上半场{
背景：红色；
}
.下半场{
背景：蓝色；
}

你好
那里

像这样简单没有什么不幸的，我想我的其他一些代码在元素中与它发生冲突，我会试试，给我一个提示！它起作用了。但是错误的方法是，我需要子元素向上移动，而不是向下移动，以显示600px的第二个300px上的内容。与最后一个链接没有任何不同。如果要显示两个元素，请首先使用此链接，否则请使用上一个链接。

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

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

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 {