如何制作一个按钮，当它悬停时，滑过并显示链接（JS）？

Question

有没有人可以指导我在JS中创建一个简单的应用程序？

该应用程序是这样的： 将会有一个显示“主题”的按钮，当您将鼠标悬停在该按钮上时，它会向左滑动，显示两个链接（链接将显示“Light”和“Dark”）。

我不熟悉JS，所以有人可以帮助我吗？谢谢！

Answer 1

以下是滑动叠加层的示例： http://jsfiddle.net/vWpmT/3/

这是一个挤压叠加层直到它没有宽度的示例： http://jsfiddle.net/vWpmT/2/

它需要jQuery。 除了背景颜色外，给出的CSS是最低要求。

Answer 2

你打败了我啊：啊 http://jsfiddle.net/5Ls9y/

Answer 3

以下是纯CSS过渡http://jsfiddle.net/69z3y/

的版本

Answer 4

此方法使用纯粹的 JavaScript动画引擎，它可以通过几种方式模仿jQuery动画！

参考：jsFiddle Demo

jsFiddle只展示了许多原生JavaScript动画中的一个。

有关可供使用的动画示例的完整列表以及相关教程，请查看HTML评论部分中的链接以获取更多信息。

对于灵感，请查看此专辑中记录的这个webkit CSS3 Sliding Demo and Tutorial。

状态更新：如果您的按钮是图片，那么这些5 Demos for CSS3浏览器就不错了。