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

Ahmad

Постоялец
Регистрация
4 Май 2013
Сообщения
86
Реакции
1
У меня есть простой форме, как это:

<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: Для просмотра ссылки Войди или Зарегистрируйся
 
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;

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

Вы имеете в виду, чтобы иметь две кнопки подавать? :/ Как это возможно? Можете ли вы сделать JSFiddle?
 
Спасибо. выглядит хорошо. Вы только изменили CSS, верно? Нет второй кнопки отправки?
Я добавил блок div которому задал высоту, ширину и фон. В обычном состоянии у него opacity:0, при наведении opacity:1. Для придания эффекта добавлен переход transition: opacity 1s.
 
Назад
Сверху