css - 简单的 CSS3 淡入/淡出 Sprite 图像导航？

Question

我正在尝试创建一个水平菜单，该菜单将显示一个图标列表，下方有居中文本。

这是我到目前为止所取得的成就:

http://lifeofstrange.com/fade/

我希望图标使用一个图像 sprite，它会在您悬停时淡入/淡出，如果可能，下方的文本也将具有淡入淡出效果。

我非常接近实现效果，但是我不确定 css3 转换在代码中的位置，

非常感谢您的帮助。

Answer 1

如果您想要在箭头和文本上进行淡入淡出过渡，那么您将不想更改文本的颜色和箭头背景的位置。你要做的是将背景设置为较暗的箭头，然后当你悬停时将它的不透明度设置为 0.6 或其他，与文本相同。如果您转换背景位置，您会看到从 sprite 的一部分到另一部分的滑动效果，这不是您想要的。

ul li a {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
ul li a:hover {
    opacity: 0.6;
}