[contact-form-7 id="24085" title="Feedback RU"]

JS Animation. Как добавить фон, который отображается при наведении мышью

Добрый день! Из этого туториала Вы узнаете, как добавить фон, который отображается при наведении мышью (при фокусе) в JS-анимированном шаблоне.

JS Animation. Как добавить фон, который отображается при наведении мышью

  1. :focus – это псевдо-класс CSS, который изменяет стиль элемента, если этот элемент был выбран нажатием мыши, либо находится в активной вкладке. Давайте изменим фон при фокусе текстового поля контактной формы:

    How to assign specific background for element on focus event1

  2. Исследуйте нужный элемент сайта при помощи инструментов разработчика, таких как Firebug и добавьте правило для элемента:

    How to assign specific background for element on focus event2

  3. Добавьте :focus к селектору элемента и добавьте фон:

    How to assign specific background for element on focus event3

  4. Скопируйте правило вниз файла style.css и сохраните его:

    How to assign specific background for element on focus event4

  5. Обновите страницу и нажмите на текстовое поля для просмотра изменений:

    How to assign specific background for element on focus event5

Теперь Вы знаете, как добавить фон, который отображается при наведении мышью (при фокусе).

Вы можете также ознакомиться с детальным видео-туториалом ниже:

JS Animation. Как добавить фон, который отображается при наведении мышью