Привет! в прошлой статье мы разобрали как изменить цвет текста в HTML документе, руководствуясь этой статьей вы можете так же изменить цвет у тега ссылки. В этой же статье мы разберем как изменить стандартный цвет у ссылки при наведении курсора на свой.
И так, приступим,ниже у нас приведен листинг кода - 1, сначала мы устанавливаем цвет ссылки в строке 5 например выберем синий цвет color: #1e8bc3.
Дальше через псевдоатрибут hover (который отвечает на событие, когда курсор мыши находиться над объектом) в нашем случае это тег a со ссылкой, в нем мы указываем другой цвет, например темный тон синего color: #2C82C9
<html> <head> <style> a{ color:#1e8bc3; /*Изменим стандартный цвет ссылки*/ } a:hover{ color:#2C82C9; /*Изменим цвет при наведении*/ } </style> </head> <body> <a href="#">Ссылка</a> </body> </html>Листинг кода - 1
В итоге у вас будет установленный вами цвет при наведении курсора мыши на ссылку как показано ниже на рисунке 1
Убираем подчеркивание у ссылки
Как вы могли заметить наша ссылка имеет подчеркивание снизу. Если вы хотите убрать подчеркивание то нужно указать в следующий стиль к нашему тегу а text-decoration: none, как показано ниже в листинге кода 2 в строке 6.
<html> <head> <style> a{ color:#1e8bc3; /*Изменим стандартный цвет ссылки*/ text-decoration:none; /*Убираем подчеркивание*/ } a:hover{ color:#2C82C9; /*Изменим цвет при наведении*/ } </style> </head> <body> <a href="#">Ссылка</a> </body> </html>Листинг кода - 2
В итоге у вас не будет отображаться подчеркивание у ссылки, как показано ниже на рисунке 2
Плавная смена цвета при наведении
Если вы хотите сделать смену цвета ссылки более плавной, то нужно указать соответствующий стиль нашему тегу a - transition: 1s linear; где 1s это время в секундах, в течении которого будет происходить смена текста, вы можете указать это время по своему желанию, например 0.7s
В листинге кода 3 в строке 7 приведен пример, как правильно задать смену цвета
<html> <head> <style> a{ color:#1e8bc3; /*Изменим стандартный цвет ссылки*/ text-decoration:none; /*Убираем подчеркивание*/ transition: 1s linear; /*Плавная смена цвета*/ } a:hover{ color:#2C82C9; /*Изменим цвет при наведении*/ } </style> </head> <body> <a href="#">Ссылка</a> </body> </html>Листинг кода - 3
Если у вас есть вопросы, или что то не получается напишите об этом в комментариях!
Комментарии 1
Написать комментарий