background-image transition не работает на кнопки формы ...

[Ahmad]

У меня есть простой форме, как это:

<section class="subscribe" title='Lorem Ipsum'>
<form class="form-wrapper cf" method="post">
<input class="tiptipNewsletterInfo" id="emailInputText" name="email" placeholder="Enter your email here..." />
<button class="showforDesktopsOnly" id="submitBtnForDesktop" type="submit">Subscribe</button>
</form>
</section>
Теперь я хочу, чтобы изменить фоновое изображение отображается на кнопку отправки, когда курсор мыши находится над ним. Для этого я попытался с помощью следующей CSS, но не работает:

.form-wrapper #submitBtnForDesktop {
background: url("Для просмотра ссылки Войди или Зарегистрируйся") no-repeat 0 0 transparent;
transition: background-image 0.5s;
}

.form-wrapper #submitBtnForDesktop:hover {
background: url("Для просмотра ссылки Войди или Зарегистрируйся") no-repeat 0 -28px transparent;
}

Настоящее время я использую `transition: background-image 0.5s;` в другом месте, чтобы изменить другие фоновые изображения при наведении мыши, но это просто не работает в этом случае.

Кто-нибудь знает, почему?

JSFiddle: Для просмотра ссылки Войди или Зарегистрируйся

 

[Trusteg]

Для просмотра ссылки Войди или Зарегистрируйся

 

[Ahmad]

Для просмотра ссылки Войди или Зарегистрируйся

Это не переход я хотел. Я хотел замирания transtion, не скользящая один ..

 

[Trusteg]

Это не переход я хотел. Я хотел замирания transtion, не скользящая один ..

You need to create 2 files: 1)img ; 2) img when you hover on 1st img;
And try to use in css: transition: background 1s ease-out 0s;

 

[Ahmad]

You need to create 2 files: 1)img ; 2) img when you hover on 1st img;
And try to use in css: transition: background 1s ease-out 0s;

Да, это решит проблему, но я использую спрайтов. Нет ли решение, которое будет работать с спрайтов тоже?

 

[Trusteg]

Да, это решит проблему, но я использую спрайтов. Нет ли решение, которое будет работать с спрайтов тоже?

Создать элемент c картинкой поверх кнопки и менять при наведении с помощью opacity и transition

 

[Ahmad]

Создать элемент c картинкой поверх кнопки и менять при наведении с помощью opacity и transition

Вы имеете в виду, чтобы иметь две кнопки подавать? :/ Как это возможно? Можете ли вы сделать JSFiddle?

 

[Trusteg]

Для просмотра ссылки Войди или Зарегистрируйся

Не забудьте добавить -o- -moz- -webkit- для свойства transition

 

[Ahmad]

Для просмотра ссылки Войди или Зарегистрируйся

Не забудьте добавить -o- -moz- -webkit- для свойства transition

Спасибо. выглядит хорошо. Вы только изменили CSS, верно? Нет второй кнопки отправки?

 

[Trusteg]

Спасибо. выглядит хорошо. Вы только изменили CSS, верно? Нет второй кнопки отправки?

Я добавил блок div которому задал высоту, ширину и фон. В обычном состоянии у него opacity:0, при наведении opacity:1. Для придания эффекта добавлен переход transition: opacity 1s.