Сегодня вы узнаете, как сделать так, чтобы окраска объекта изменялась в момент наведения курсора.

Сегодня перед нами стоит задача изменения цвета элемента, когда на него наводиться курсор мыши.

Рассмотрим решение нашей задаче на примере ссылки. Допустим, для ее текста установлен определенный цвет — это делается с помощью свойства color. Чтобы объект реагировал на наведение курсора, необходимо к этому объекту добавить псевдокласс :hover. Таким образом мы добьемся изменения цвета, но оно будет происходить мгновенно. Чтобы управлять временем изменения, необходимо обратиться к свойству transition. Через него можно будет установить время изменения цвета в миллисекундах или в секундах.

В коде указана синяя ссылка, которая в момент наведения курсора мыши будет плавно менять свой цвет на красный.

CSS

a {
    color: #1f65a7;
    transition: 0.6s linear;
   }
a:hover {
    color: #ff0000;
   }

В каких браузерах работает?