Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Как задать плавную смену цвета при наведении?

Дата:16.01.16 в 14:55
Раздел: 

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

Как сделать плавное изменение цвета при наведении?

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

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

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

CSS

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

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

10.0+ 25.0+ 12.1+ 6.1+ 16.0+

Оценок: 2 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)