Question

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

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

这是怎么用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;
}

带过渡的简单jQuery / CSS3菜单

1 个答案: