Меню
Спросить
*.{ }

Псевдокласс hover

20 октября 2016
Псевдокласс hover

Всем привет!

Сегодня на теме псевдокласс hover. Но многие из начинающих еще не знают ни каких псевдоклассов, поэтому познакомимся сначала с ними.

Псевдоклассы

Для начала вспомним, что будь то блок или ссылка, простой текст или таблица, кнопка, картинка и тд, все это элементы.

Псевдокласс - это тот же элемент, но измененный. Его на нашем сайте не существует, то есть в html тегах мы его ни где не найдем. Он рождается с помощью css, при употреблении некоторых строк. Одним из них мы сейчас и познакомимся.

псевдокласс hover

Hover

Псевдокласс hover создает изменения элементу, при наведении на него курсором.

Кратко - когда мышкой наводим на элемент, его свойства css меняются.

Чтобы этого добиться, заходим в наши стили css.
Далее, выбираем название, class или же id элемента.
Прописываем его, и после названия, classа или id элемента прописываем через двоеточие "hover".

Дальше, все как обычно, открываем фигурные скобки и пишем те свойства, какие хотим, чтобы изменились у элемента при наведении на него мышкой.

Рассмотрим пример:

  1. #block_one{
  2. background:red; /*Цвет фона: Красный*/
  3. }

  4. /*Изменения при наведении мышкой на него*/
  5. #block_one:hover{
  6. background:blue; /*Цвет фона: Синий*/
  7. }

Разберем код.

Наш элемент с id "block_one" имеет первоначально красный цвет фона.
При наведении на него курсором мыши, цвет меняются на синий.

Заключение

Таким образом работает псевдокласс hover. Создается некая анимация на элементе.
Можно менять абсолютно любые свойства и можно добиться красивых эффектов на сайте с помощью данного псевдокласса =)

Поиграйте с разными свойствами и переходите на следующие уроки для начинающих по css.

Всего всем доброго! =)

Следующая статьяПредыдущая статья