jQuery背景图像在提交按钮输入上淡出

Question

我一直在使用this tutorial的基本要点来创建与悬停时淡入不同背景图像（使用精灵）的背景图像的链接。这基本上是通过在链接中放置一个空的跨度来完成的，该链接在悬停之前一直隐藏，然后淡入以查看。

如何使用提交按钮输入执行相同的操作？我不能只是放入一个跨度，因为很明显你不能在输入标签中插入HTML，因为它是自动关闭的。那么还有其他选择吗？

我想到的一件事是用相同宽度/高度的div围绕输入，并给div悬停背景图像，并在悬停时，将跨度淡出到0.01的不透明度，这样它仍然是可点击但是透明。有没有更好的选择，还是这样？

Answer 1

我认为你真正想知道的（如果我可以这么说），是如何在你的表单中使用图像作为提交按钮。完成设置之后，在jquery中使用fade方法应该非常简单。

这是另一个SO问题，展示了如何为按钮使用背景图像：

How to change an input button image using CSS?

另请注意，Safari不允许使用背景图像作为按钮，因此您需要破解它（类似于您建议使用div）。上述问题也涵盖了这一点。

Answer 2

我最终使用了this technique。

基本上，不是在元素中添加一个跨度，而是在元素上添加一个div，并在悬停时淡入按钮。