带有过渡的简单 jQuery/CSS3 菜单

Question

我正在尝试使用 jQuery 或 CSS3 制作一个具有良好过渡效果的简单菜单。问题是我想要 3 个具有 3 种不同悬停和活动状态（即不同颜色）的按钮。有什么更好的呢？ jQuery 还是 CSS3？我知道 IE9 不支持 CSS3，所以现在应该使用它吗？这个菜单用 CSS3 似乎比 jQuery 更容易实现，我想。请参阅我的菜单 here，它是使用我找到的 here 的 jQuery 教程创建的。

如您所见，第二个按钮（红色）显示不流畅，而第三个按钮的过渡更流畅。这三个我都需要这个效果，但是每个按钮都有不同的颜色。

你会这样用 CSS3 做同样的效果吗？

.button1 {
    background-image: url('test.png');
 }

.button1:hover {
    background-image: url('test_hover.png');
    transition: background-image .15s ease-in;
    -webkit-transition: background-image .15s ease-in;

希望我解释得对。如果您需要任何澄清，请告诉我。谢谢。

Answer 1

使用 CSS3 过渡的好处是，如果浏览器无法识别它们，它们将被忽略。在这种情况下，过渡将简单地退回到即时翻转。

我建议使用sprite image。然后不要在悬停时更改图像......只需更改图像位置。

.button1 {
    background-image: url('test_sprite.png');
    background-position: top;
}

.button1:hover {
    background-position: bottom;
    transition: background-position .15s ease-in;
    -moz-transition: background-position .15s ease-in;
    -o-transition: background-position .15s ease-in;
    -webkit-transition: background-position .15s ease-in;
    -ms-transition: background-position .15s ease-in;
}