Html 到达边界时div悬停问题

我想在div上使用悬停效果，当悬停在div上时，我已经应用了底部样式，并且一切都正常，但是当悬停在div的边界/边缘时，意味着div不断地抖动/跳跃

我的代码：

.traning box{
背景：#fff；
填充顶部：70px；
填充底部：30px；
盒影：0.35px 5px rgba（0,0,0,07）；
边界半径：5px；
宽度：120px；
文本对齐：居中；
}
.训练箱：悬停{
底部：15px；
位置：相对位置；
}

试验箱

试试下面的方法。您必须使用内部div来编写悬停效果

.traning box{
背景：#fff；
填充顶部：70px；
填充底部：30px；
盒影：0.35px 5px rgba（0,0,0,07）；
边界半径：5px；
宽度：120px；
文本对齐：居中；
}
.traning-box1{宽度：120px；}
.训练箱1：悬停训练箱{
底部：15px；
位置：相对位置；
}

试验箱

尝试在伪元素之后使用

。当
.traning box
上升时，
:after
下降，因此光标仍将位于
.traning box
上（因为它是
:after
的父块）


.traning box{
背景：#fff；
边界半径：5px；
盒影：0.35px 5px rgba（0,0,0,07）；
填充顶部：70px；
填充底部：30px；
位置：相对位置；
文本对齐：居中；
宽度：120px；
}
.培训箱：之后{
底部：0；
显示：块；
内容：''；
高度：15px；
左：0；
位置：绝对位置；
宽度：100%；
}
.训练箱：悬停{
利润上限：-15px；
}
.训练箱：悬停：之后{
底部：-15px；
}

试验箱

您可以使用
动画来实现它


.traning box{
背景：#fff；
填充顶部：70px；
填充底部：30px；
盒影：0.35px 5px rgba（0,0,0,07）；
边界半径：5px；
宽度：120px；
文本对齐：居中；
利润率：20px；
位置：相对位置；
}
.训练箱：悬停{
动画名称：移动；
动画持续时间：1s；
动画迭代次数：1；
动画计时功能：轻松；
位置：相对位置；
边框：1px纯红；
}
@关键帧移动{
50%{
转换：translateY（-15px）；
}
}

试验箱

您需要同时使用
transition
和
translate
来实现平滑的悬停效果


.traning box{
背景：#fff；
填充顶部：70px；
填充底部：30px；
盒影：0.35px 5px rgba（0,0,0,07）；
边界半径：5px；
宽度：120px；
文本对齐：居中；
过渡：所有0.5s线性；
}
.训练箱：悬停{
转换：translateY（-15px）；
位置：相对位置；
}

试验箱

我在JSFIDLE上添加了一个示例：您可以使用脚本来实现这种悬停效果。jquery脚本将是您的解决方案this@Nageswar当鼠标悬停时，您希望将哪种类型的效果提高15px更好地使用
transform:translateY（-15px）
@VilleKoo jecking/jumping将继续，如果你使用相同的div悬停。当你在底部边界时，这里仍然有跳跃效果当你在底部边界时，这里仍然有跳跃效果。我不知道为什么这会被否决，但它似乎是唯一没有跳跃效果的