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

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Styler247, 15 сен 2013.

  1. Styler247

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2
    У меня есть простой форме, как это:

    <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("http://i.imgur.com/ANkUR4e.png") no-repeat 0 0 transparent;
    transition: background-image 0.5s;
    }

    .form-wrapper #submitBtnForDesktop:hover {
    background: url("http://i.imgur.com/ANkUR4e.png") no-repeat 0 -28px transparent;
    }

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

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

    JSFiddle: http://jsfiddle.net/5FrBv/
     
  2. Styler247

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2
    Не кого-нибудь есть идеи?
     
  3. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    transition: background 0.5s ease;
    -webkit-transition: background 0.5s ease;
     
  4. Styler247

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2
    Спасибо. Я предполагаю, что это для 2 изображения? А как насчет текста? Где я могу вставить этот CSS?
     
  5. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    .form-wrapper #submitBtnForDesktop {
    transition: background 0.5s ease;
    -webkit-transition: background 0.5s ease;
    }
    На счет текста не понял.
     
  6. Styler247

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2
    К сожалению об этом. Я имел в виду мой вопрос из другой темы :Smile:

    Как я могу получить исчезают перехода, вместо этого вертикального скольжения перехода?

    Пример (наведении указателя мыши на стрелке изображений):

    http://css-tricks.com/examples/FadeImageWithSprite/