提交按鈕輸入上的jQuery背景圖像褪色

Question

我一直在使用本教程的基本要點來創建帶有背景圖像的鏈接， 這些鏈接在懸停時會淡出為不同的背景圖像（使用sprite）。 基本上，這是通過在鏈接內部放置一個空的跨度來完成的，該跨度一直隱藏直到懸停，然后淡入顯示。

如何使用提交按鈕輸入來做同樣的事情？ 我不能只輸入一個span，因為很明顯您不能將HTML插入到輸入標簽中，因為它是自動閉合的。 還有其他選擇嗎？

我想做的一件事是用相同寬度/高度的div包圍輸入，並給div懸停背景圖像，並在懸停時將跨度淡出為0.01左右的不透明度，這樣它仍然可以單擊但可以透明。 有更好的選擇還是這條路？

Answer 1

我認為您真正想知道的（如果我可以這么說）是如何在表單中使用圖像作為提交按鈕。 設置好之后，在jquery中使用fade方法應該非常簡單。

這是另一個SO問題，顯示如何為按鈕使用背景圖像：

如何使用CSS更改輸入按鈕圖像？

還要注意，Safari不允許按鈕使用背景圖片，因此您需要對此進行修改（類似於您使用div建議的內容）。 上面的問題也涵蓋了這一點。

Answer 2

我最終使用了這種技術 。

基本上，不是在元素內添加跨度，而是在元素周圍添加div並在懸停時淡入按鈕。