Html 向背景添加过渡：线性渐变

这是我的HTML：

<nav role="navigation">
<div align="center">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="games.php">Games</a></li>
<li><a href="trivia.php">Trivia</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</nav>

下面是一个JSFIDLE：

当有人将鼠标悬停在

上时，如何添加以下CSS？我知道这很棘手，因为这是一个线性梯度

 transition: .4s;
 -moz-transition: .4s;
 -webkit-transition: .4s;
 -ms-transition: .4s;

---

最接近的方法是将两个节点堆叠在彼此的顶部，每个节点具有所需的渐变，并转换顶部节点的不透明度：

#容器{
位置：相对；宽度：100px；高度：100px；
}
#一，二{
位置：绝对；顶部：0；左侧：0；右侧：0；底部：0；
}
#一个{
背景：线性梯度（红色、蓝色）；
}
#两个{
背景：线性梯度（白色、黑色）；
过渡：不透明度1s；
}
#二：悬停{
不透明度：0
}

线性渐变是图像（或几乎类似图像），因此我认为您无法从一个渐变过渡到完全不同的渐变。你最好的选择可能是看位置的转换。你不能设置渐变动画。你能得到的最接近的方法是将两个节点堆叠在彼此的顶部，一个具有你想要的每个渐变，并转换顶部节点的不透明度。你能不能发布一个这样的代码示例@DanielBeckposted回答如下感谢。我在将其应用于我的代码时遇到了一些问题，但是，您能帮忙吗？（但是请注意重复的链接，一个在转换绝对定位元素中，一个在静态内联元素中。这是一个廉价的方法来获得匹配的大小——如果你的

s有一个固定的宽度，你完全可以像

.hoverGradient

一样定位链接，并将

.hoverGradient

保留为空。让链接保持内联可以让它设置自己的宽度，这是你想要的，但它会堆叠在绝对定位的渐变之下，这是你不想要的。TBH我不建议你使用这种技术，它可以作为一个演示，但这是一个小技巧。

 transition: .4s;
 -moz-transition: .4s;
 -webkit-transition: .4s;
 -ms-transition: .4s;