Html CSS：从下到上悬停时的背景填充：

请看一看这个例子：

请注意，当您将鼠标悬停在链接上时，设置动画以从下到上填充锚文本的背景，当您将鼠标悬停在远离锚文本的位置时，背景将从上到下进行清除

我在自己的网站上也做过类似的事情。与之相关的CSS：

a {
    box-shadow: inset 0 -3px 0 -1px #FFF986;
    -webkit-transition: box-shadow .15s ease-in-out;
    transition: box-shadow .15s ease-in-out;
    color: black;
}

a:hover {
    box-shadow: inset 0 -3px 0 40px #FFF986;
    -webkit-transition: box-shadow .15s ease-in-out;
    transition: box-shadow .15s ease-in-out;
}

这给了我一个类似的效果，但不是像示例链接中那样从上到下填充：背景开始从矩形的所有边向中心填充

---

我如何强制它从上到下填充，就像我共享的示例链接一样？我缺少什么？

您更改了错误的参数：

a：悬停{
方框阴影：插入0-40px 0-1px#FFF986；

a{
盒影：插入0-3px 0-1px#FFF986；
过渡：方块阴影。15秒缓进缓出；
颜色：黑色；
线高：40px；
}
a:悬停{
盒影：插入0-40px 0-1px#FFF986；
}

---

另一种使用50%/50%线性渐变的解决方案，其大小调整为200%。要设置背景动画，请更改背景位置：

a{
背景图像：线性渐变（至顶部，黄色50%，透明50%）；
背景大小：100%200%；
背景位置：顶部；
过渡：背景位置0.5s缓进缓出；/**为了演示，我更改了时间**/
颜色：黑色；
}
a:悬停{
背景位置：底部；
}

谢谢！这就是诀窍。我知道我做错了。顺便说一句：它现在是从上到下填充的，不是从下到上填充的——但这没关系。我会弄明白的。谢谢，负号造成了方向上的差异！@JasonGenX，很乐意帮忙！你也可以这样做：；）@TemaniAfif-我也知道，但我认为我的更容易：）嗯，mine实际上是从下到上填充，但你的从下到上移动，在问题中，我们想要填充…（开玩笑！：p）。