Question

请看一下这个例子：

https://www.outsideonline.com/2317131/wilma-rudolph-worlds-fastest-woman

请注意，当您将鼠标悬停在链接上时，背景会动态填充，以从下至上填充锚文本，并且当您将鼠标悬停在悬停位置时，背景会从上到下清除它。

我在自己的网站上做了类似的事情。相关的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;
}

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

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

Answer 1

您更改了错误的参数：

a:hover { box-shadow: inset 0 -40px 0 -1px #FFF986;

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

<a href="#">Hey Mickey!</a>

Answer 2

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

a {
  background-image: linear-gradient(to top, yellow 50%, transparent 50%);
  background-size: 100% 200%;
  background-position: top;
  transition: background-position 0.5s ease-in-out; /** I've changed the time for demo purposes **/
  color: black;
}

a:hover {
  background-position: bottom;
}

<a href="#">I'm a link</a>
<a href="#">I'm another link</a>

CSS：背景从下到上悬停在上方：

2 个答案: