按钮在CSS或Javascript中从正常按钮悬停并按下了ianage？

Question

我有三个按钮，一个是普通按钮图像，另一个是普通按钮悬停时的按钮图像，第三个按钮图像是按下普通按钮时的按钮图像。我的问题是如何过渡到悬停并恢复正常，并从正常图像中按下？我可以将CSS或javascript用作更好的解决方案吗？

Answer 1

使用CSS非常简单：

.my-button {
   // normal styles
}

.my-button:hover {
   // hover styles
}

.my-button:active {
   // active (clicked) button styles
}

如果你要使用背景图片，一个好方法就是使用按钮精灵表，然后根据按钮状态转换background-position。 Here就是一个例子。