带转换的简单jQuery/CSS3菜单

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

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

这是你如何做与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;

希望我解释一切正确。如果您需要澄清，请告诉我。谢谢。

来源

2012-01-17 mapr

单独使用CSS总是可取的。 CSS3并不如此，因为它需要现代浏览器，而且规范还没有被确定下来。尝试使用CSS实现基本功能，然后添加CSS3转换作为选项。 – Blazemonger 2012-01-17 17:57:13

有关使用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; 
}

来源

2012-01-17 18:03:11 Joel

谢谢！会试试这个，让你知道。所以在HTML中，我需要给这个类，'button1'，一个图像，是否正确？如在''中。我是否需要在CSS中指定精灵图像的尺寸？ – mapr 2012-01-17 22:05:07

没关系，明白了！再次感谢！ – mapr 2012-01-18 06:12:53

带转换的简单jQuery/CSS3菜单

回答

相关问题