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

Тема в разделе "Верстка", создана пользователем Ahmad, 15 сен 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Ahmad

    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: Перейти по ссылке
     
  2. Trusteg

    Trusteg Создатель

    Регистр.:
    30 ноя 2012
    Сообщения:
    36
    Симпатии:
    11
  3. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1
    Это не переход я хотел. Я хотел замирания transtion, не скользящая один ..
     
  4. Trusteg

    Trusteg Создатель

    Регистр.:
    30 ноя 2012
    Сообщения:
    36
    Симпатии:
    11
    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;
     
  5. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1
    Да, это решит проблему, но я использую спрайтов. Нет ли решение, которое будет работать с спрайтов тоже?
     
  6. Trusteg

    Trusteg Создатель

    Регистр.:
    30 ноя 2012
    Сообщения:
    36
    Симпатии:
    11
    Создать элемент c картинкой поверх кнопки и менять при наведении с помощью opacity и transition
     
  7. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1
    Вы имеете в виду, чтобы иметь две кнопки подавать? :/ Как это возможно? Можете ли вы сделать JSFiddle?
     
  8. Trusteg

    Trusteg Создатель

    Регистр.:
    30 ноя 2012
    Сообщения:
    36
    Симпатии:
    11
  9. Ahmad

    Ahmad Постоялец

    Регистр.:
    4 май 2013
    Сообщения:
    86
    Симпатии:
    1
    Спасибо. выглядит хорошо. Вы только изменили CSS, верно? Нет второй кнопки отправки?
     
  10. Trusteg

    Trusteg Создатель

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