JQuery фоновое изображение исчезает при вводе кнопки отправки

Question

Я использовал основную суть этого урока для создания ссылок с фоновыми изображениями, которые переходят на разные фоновые изображения (используя спрайт) при наведении курсора.Это в основном делается путем помещения пустого промежутка внутри ссылки, которая скрыта до наведения, а затем она исчезает для просмотра.

Как я могу сделать то же самое, используя ввод с помощью кнопки отправки?Я не могу просто вставить диапазон, потому что, очевидно, вы не можете вставить HTML внутрь входного тега, поскольку он самозакрывающийся.Итак, есть ли другие варианты?

Одна вещь, о которой я думал, заключалась в том, чтобы окружить входные данные div с такой же шириной / высотой и дать div фоновое изображение при наведении курсора, а при наведении увеличить диапазон до прозрачности чего-либокак 0,01, чтобы он все еще был кликабельным, но был прозрачным.Есть ли лучшие варианты или это путь?

Answer 1

Я использовал эту технику .

По сути, вместо того, чтобы добавить span ВНУТРИ элемента, вы добавляете div Вокруг элемента и исчезаете при наведении на кнопку.

Answer 2

Я думаю, что вы действительно хотите знать (если можно так сказать), как использовать изображение в качестве кнопки отправки в вашей форме. Как только вы это настроите, использование метода fade в jquery должно быть довольно простым.

Вот еще один вопрос SO, который показывает, как использовать фоновое изображение для вашей кнопки:

Как изменить изображение кнопки ввода с помощью CSS?

Также обратите внимание, что Safari не позволяет использовать фоновые изображения для кнопок, поэтому вам придется взломать это (аналогично тому, что вы предложили использовать div). Вопрос выше также охватывает это.