Как изменить цвет ссылки при наведении курсора в html
Перейти к содержимому

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

  • автор:

Меняем цвета ссылок

Возможность изменения цвета ссылок одна из важных составляющих HTML-верстки. Ведь это позволяет не только грамотно вписать ссылки в дизайн сайта, но и помогает посетителям ориентироваться в его навигации. В уроке Ссылки и их разновидности вы узнали, что такое посещенные, непосещенные, активные ссылки и ссылки при наведении курсора мыши. Теперь вы научитесь менять цвет ссылок в каждом из этих состояний.

В старых версиях HTML существовали специальные атрибуты тега , позволяющие изменять цвет ссылок на HTML-странице, это link , alink и vlink , но в современном HTML их нет. Поэтому мы опять будем использовать стили (CSS), а значит что? Вот и неправильно, не атрибут style , а так называемые внутренние стили. Для этого нам надо будет в «шапку» страницы ( ) вставить тег , а внутри него указать один или несколько следующих стилей:

  

C тегом вы пока еще не знакомы, но тут и учить нечего. Он используется для внутренних стилей, которые будут действовать в пределах всей страницы. А его атрибут type как раз и говорит браузеру о том, что внутри находятся стили (CSS), а не обычный текст.

Пример изменения цвета ссылок в HTML-странице

    Изменение цвета ссылок на странице a:link a:visited a:hover a:active 

Как создать сайт

Справочники по HTML и CSS

Результат в браузере

Если вы недавно были на страницах указанных в ссылках, то естественно ссылки будут сразу окрашены в «посещенный» цвет.

Изменяем цвет отдельных ссылок

Иногда вам может понадобиться, чтобы цвет определенной ссылки отличался от остальных. Тогда укажите внутри тега атрибут style= «color:цвет» и задайте нужный цвет.

Пример использования тегов

    Изменение цвета ссылок на странице a:link a:visited a:hover a:active 

Сайт Seodon.ru

Здесь вы можете найти справочник по тегам HTML

Результат в браузере

  1. Создайте три блока DIV и пусть их фон будет цвета #EEEEEE.
  2. Разместите в каждом DIV’е по одной ссылке. Пусть они ведут на любые сайты в интернете.
  3. В каждой ссылке сделайте так, чтобы при наведении на нее курсора мыши появлялась соответствующая подсказка.
  4. Пусть цвет непосещенной ссылки будет #FF0099, посещенной — #009933, при наведении курсора мыши — #0099FF, активной — #00FF66.

Разделы сайта

  • Как сделать сайт
    Самому и бесплатно
  • Учебник HTML
    Для начинающих
  • Учебник CSS
    Для новичков
  • Справочники
    По HTML и CSS
  • Примеры
    HTML и CSS
  • Ссылки
    Полезные сайты для вебмастеров
  • Инструментарий
    Программы для создания сайтов

Учебник HTML

  • Введение
  • Что такое HTML?
  • Теги и синтаксис HTML
  • Атрибуты HTML-тегов
  • Общие и текст
  • Структура HTML-документа
  • Параграфы и заголовки
  • Как изменить шрифт?
  • Меняем цвет текста и фона
  • Выравнивание содержимого
  • Цитаты и обрыв строки
  • Что такое спецсимволы HTML?
  • Горизонтальные линии
  • Группирование элементов
  • Комментарии в HTML
  • Ссылки
  • Cсылки и их разновидности
  • Меняем цвета ссылок
  • Ссылки на электронную почту
  • Якоря — создаем закладки
  • Изображения
  • Изображения
  • Изображения для фонов
  • Изображения — ссылки
  • Таблицы
  • Таблицы
  • Границы, рамки и отступы HTML-таблиц
  • Объединение ячеек таблицы
  • Вложенные таблицы
  • Списки
  • Нумерованные и маркированные списки
  • Метатеги
  • Метатеги и их типы

Copyright © 2010-2015 seodon.ru Все права защищены.

С условиями использования материалов данного сайта вы можете ознакомиться на странице автора.

Анимация ссылок при наведении

За стиль элемента при наведении на него курсора мыши отвечает свойство :hover. Например, вот как сделать, чтобы цвет ссылки менялся с зелёного на коричневый.

a < color:green; >a:hover

Сама смена цвета или других параметров, если они указаны, происходит мгновенно и чтобы сделать её плавной, к селектору a следует добавить свойство transition. В качестве значения указываем время перехода от одного цвета к другому. К примеру, здесь время перехода занимает полсекунды.

a < color:green; transition: 0.5s; >a:hover

Для ссылок таким методом допустимо менять параметры шрифта, цвет текста, фона, толщину рамки, её цвет и некоторые другие характеристики. Учтите, что не все свойства вообще можно таким способом анимировать. Если у свойства есть дискретные значения, то никакой плавности не ожидайте. Например, свойству text-decoration можно присвоить значение none или underline . Это означает, что ссылки могут находиться только в двух состояниях: с подчёркиванием и без него.

В примере 1 показано добавление линии снизу через border-bottom. Первоначально толщина линии равна нулю, поэтому она у ссылок не отображается. При наведении на ссылку курсора мыши толщина линии плавно увеличивается до трёх пикселей.

Пример 1. Использование border-bottom

Таким же образом можно изменить не только цвет текста, но и цвет фона, или одновременно и то и другое. В примере 2 при наведении курсора на ссылку происходит смена цвета фона с серого на синий.

Пример 2. Использование background

Кроме непосредственной замены значений свойств ссылки можно трансформировать через свойство transform. Сюда входят всякие искажения, вроде поворота, масштабирования, смещения и др. Вот как будет выглядеть одновременный поворот и сдвиг при наведении (пример 3).

Пример 3. Использование transform

Свойство transform не работает непосредственно для строчных элементов, которыми ссылки являются по умолчанию. Поэтому их надо превратить в блочные или строчно-блочные элементы через свойство display со значением inline-block .

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

Использование псевдоэлементов

Псевдоэлемент создаётся при помощи ключевых слов ::before и ::after, которые слитно пишутся после имени селектора. Сам псевдоэлемент представляет собой подэлемент, который вставляется до или после содержимого самого элемента. В случае ссылок:

  • a::before — подэлемент до содержимого элемента ;
  • a::after — после содержимого элемента .

Сам код HTML остаётся исходным, никаких дополнительных частей к ссылкам мы не прибавляем, само формирование псевдоэлементов выполняется через CSS. Вот как их можно представить:

a::before — [Псевдоэлемент]Содержимое a::after — Содержимое[Псевдоэлемент]

Псевдоэлементы расширяют возможности по дизайну, поскольку к ним можно применять разнообразное стилевое оформление и они управляются независимо от самого элемента, оставаясь к нему привязанным.

В примере 4 показано добавление красной линии толщиной в один пиксель ниже текста ссылки через псевдоэлемент ::after .

Пример 4. Использование ::after

Давайте построчно разберём данный код CSS.

content: '';

Свойство content добавляет содержимое к псевдоэлементу и без него наш дальнейший код работать не будет. Пустые кавычки показывают, что содержимого как такового нет, поскольку нам требуется только цветной прямоугольник без какого-либо текста внутри.

position: relative + position: absolute

Эта комбинация у элемента и псевдоэлемента позволяет задавать его положение относительно краёв элемента через свойства left, top, right и bottom.

Для понимания работы свойства position рекомендуем пройти курс Позиционирование элементов.

left: 0; bottom: 0

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

background-color: red

Цвет фона псевдоэлемента, в данном случае красный.

z-index: -1

Псевдоэлемент выводится поверх текста ссылки и своим фоном может перекрывать его. Чтобы этого не случилось, по оси Z располагаем псевдоэлемент ниже.

width: 100%

Ширина нашего псевдоэлемента. Из-за пустого содержимого подэлемент будет нулевой ширины и высоты, поэтому эти параметры следует задать явно.

height: 1px

Желаемая высота псевдоэлемента. Поскольку нам нужна линия толщиной в один пиксель, это же значение указываем в свойстве height. Если поставить 2px, то толщина линии, соответственно, будет два пикселя.

Созданную таким образом линию можно анимировать при наведении на ссылку курсора мыши, меняя нужные нам параметры. Но уже не у самого a::after , а у селектора a:hover::after .

В примере 5 при наведении на ссылку линия снизу увеличивается на всю высоту ссылки.

Пример 5. Изменение псевдоэлемента ::after при наведении

Заметьте, что здесь transition добавляется к селектору a::after , потому что именно псевдоэлемент меняет свои параметры при наведении.

Схожим образом можно делать и другие эффекты, взяв за основу пример 2 и незначительно меняя в нём некоторые свойства и значения. Вот линия толщиной три пикселя, движущаяся слева направо.

a::after < width: 0; /* Линия не видна */ height: 3px; /* Высота линии */ >a:hover::after < width: 100%; /* Линия занимает всю ширину */ >

Если у height поставить 100%, то это будет уже не линия, а фон под ссылкой.

a::after < width: 0; /* Фон не виден */ height: 100%; /* Вся высота */ >a:hover::after < width: 100%; /* Весь фон */ >

Использование градиента

Интересные эффекты при наведении получаются при использовании линейного градиента. Он делается следующим образом.

background-image: linear-gradient(to left, red, blue)

В параметрах функции linear-gradient() сперва указывается направление градиента (в данном случае to left означает влево), затем начальный и конечный цвета. Если эти цвета задать одинаковыми, то получим однотонный фон без всякого градиента.

Градиент является фоновым изображением, поэтому к нему применимы следующие стилевые свойства:

  • background-repeat — повторение фона;
  • background-position — точка, откуда начинается фон;
  • background-size — размер фона.

Пример 6. Движение градиента слева направо

Задать разное направление движения градиента можно через комбинацию свойств background-position , которое определяет начальную позицию фона, и background-size , устанавливающее размер фона. В табл. 1 показан код CSS, его надо включить в пример 6 для получения желаемого движения градиента.

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

Схожим образом делается градиентная линия, меняющая свои параметры при наведении на элемент. В примере 7 возле ссылок отображается прямоугольник размером 10×2 пикселя. При наведении курсора мыши на ссылку прямоугольник увеличивается на всю ширину ссылки.

Пример 7. Создание линии через градиент

Итоги

  • За стиль элемента при наведении на него курсора мыши отвечает псевдокласс :hover.
  • Плавный переход от одного значения к другому при наведении делается с помощью свойства transition, которое устанавливает время перехода.
  • :hover можно комбинировать с псевдоэлементами ::before и ::after для добавления к ссылке дополнительного декоративного оформления.
  • Схожего результата можно добиться, используя фон, созданный с помощью линейного градиента. Меняя параметры фона можно добиться различных эффектов при наведении курсора на ссылку.

Автор: Влад Мержевич
Последнее изменение: 24.04.2023

Создайте меню сайта, как показано на видео. При наведении курсора мыши на пункт меню ниже текста появляется линия толщиной 3 пикселя и цветом #e0591e.

Меню

Создайте меню сайта, как показано на видео. При наведении курсора мыши на пункт меню из левого нижнего угла расширяется фон цветом #ffb21d на всю область ссылки.

Меню

Создайте меню сайта, как показано на видео. При наведении курсора мыши на пункт меню ниже и выше текста появляются линии толщиной 2 пикселя и цветом #2ecc71.

См. также

  • :focus на мобильных устройствах
  • background-size
  • content
  • quotes
  • relative и absolute
  • transition
  • Аккордеон меню
  • Анимация кнопок при наведении
  • Атрибуты ссылок
  • Виды ссылок
  • Всплывающая подсказка
  • Декоративные заголовки
  • Добавление тени
  • Доступность
  • Игра с картинками
  • Использование :hover
  • Масштабирование фона
  • Множественные переходы
  • Не только текст
  • Несколько фоновых картинок
  • Нормальное позиционирование
  • Очистка float
  • Переходы
  • Переходы в действии
  • Переходы и анимация
  • Переходы с помощью :hover
  • Подробнее о позиционировании
  • Подсветка строк и колонок таблицы
  • Псевдокласс :hover
  • Псевдоклассы в CSS
  • Псевдоэлемент ::after
  • Псевдоэлементы
  • Псевдоэлементы ::after и ::before
  • Работа с кавычками
  • Работа с типографикой
  • Селекторы CSS
  • Состояния кнопок
  • Сочетание с псевдоклассами
  • Типы ссылок
  • Установка фона и градиента
  • Что это такое?

Рецепты

  • Как выделить цветом строку таблицы при наведении?
  • Как добавить адрес к тексту ссылки?
  • Как добавить всплывающую подсказку к тексту?
  • Как изменить вид маркера списка?
  • Как изменить стиль чисел в списке?
  • Как изменить цвет маркеров в списке?
  • Как изменить цвет ссылки при наведении?
  • Как плавно изменить цвет ссылки?
  • Как сделать нумерацию русскими буквами?
  • Как сделать подчёркивание заголовка?
  • Как сделать ссылку для скачивания?
  • Как сделать ссылку на адрес электронной почты?
  • Как сделать фоновую картинку на всю ширину?
  • Как увеличить картинку при наведении?
  • Как указать язык сайта по ссылке?

Курсор

CSS-свойство cursor устанавливает курсор мыши, если таковой имеется, для отображения, когда указатель мыши находится над элементом.

Внешний вид курсора помогает информировать пользователей об операциях, которые можно выполнять при взаимодействии с элементом, включая: выделение текста, активацию справки или контекстного меню, копирование содержимого, изменение размера таблиц и так далее. Вы можете указать тип курсора с помощью ключевого слова или загрузить свой значок (с дополнительными резервными изображениями и ключевым словом в качестве резервного варианта отображения).

Интерактивный пример

Синтаксис

/* Ключевые слова */ cursor: auto; cursor: pointer; /* … */ cursor: zoom-out; /* Использование с обязательным резервным ключевым словом */ cursor: url(hand.cur), pointer; /* Использование URL и координат с обязательным резервным ключевым словом */ cursor: url(cursor_1.png) 4 12, auto; cursor: url(cursor_2.png) 2 2, pointer; /* Использование URL с резервными URL (иногда с координатами) с обязательным резервным ключевым словом */ cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), /* …, */ url(cursor_n.cur) 5 5, progress; /* Глобальные значения */ cursor: inherit; cursor: initial; cursor: revert; cursor: revert-layer; cursor: unset; 

Значения

url() или разделенный запятыми список url(), url(), … , указывающий на файл изображения. В качестве запасного варианта можно указать несколько url() на случай, если некоторые типы изображений курсора не поддерживаются. Резервный вариант, отличный от URL-адреса (одно или несколько ключевых слов), должен находиться в конце резервного списка.

Необязательные координаты X и Y, задающие указательную точку курсора.

Эти значения необходимо указывать в координатах изображения. Они располагаются относительно верхнего левого угла изображения (соответствует 0 0 ) и ограничены размерами изображения курсора. Если эти значения не указаны, они могут быть прочитаны из самого файла, в противном случае по умолчанию они будут находиться в верхнем левом углу изображения.

Ключевое слово должно быть установлено для указания типа используемого курсора или резервного курсора, который будет использоваться, если не удастся загрузить указанные значки.

Доступные ключевые слова перечислены в таблице ниже. Значения кроме none (что означает отсутствие курсора), являются изображением, которое будет использовано для отображения курсора. Вы можете навести указатель мыши на строки таблицы, чтобы увидеть эффект применения различных значений ключевых слов.

Указывает на возможность перемещения объекта.

Приближение или уменьшение.

Указывает на возможность схватить и переместить объект.

Формальное определение

Начальное значение auto
Применяется к все элементы
Наследуется да
Обработка значения как указано, но с абсолютными значениями url
Animation type discrete

Формальный синтаксис

cursor =
[ [ | ] [ ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]

=
|

=
x

=
y

=
url( * ) |

=
src( * )

Примеры

Задание типа курсора

.foo  cursor: crosshair; > .bar  cursor: zoom-in; > /* Использование резервного ключевого слова обязательно при использовании URL */ .baz  cursor: url("hyper.cur"), auto; > 

Спецификации

Specification
CSS Basic User Interface Module Level 4
# cursor

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

  • pointer-events
  • url() function

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

Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :hover, который добавляется к селектору A . Сперва через селектор A задаём цвет обычных ссылок, затем с помощью :hover задаём цвет ссылок при наведении (пример 1).

Пример 1. Изменение вида ссылки

В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited . Это имеет значение, иначе посещённые ссылки не будут менять свой цвет.

Вид ссылки при наведении

Рис. 1. Вид ссылки при наведении

Аналогично можно поменять и цвет фона под ссылкой при наведении на неё, добавив свойство background к селектору a:hover , как показано в примере 2.

Пример 2. Изменение цвета фона ссылки

Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding.

Изменение цвета фона ссылки

Рис. 2. Изменение цвета фона ссылки

См. также

  • :focus на мобильных устройствах
  • background
  • color
  • currentColor
  • text-fill-color
  • Анимация ссылок при наведении
  • Атрибут link
  • Виды ссылок
  • Всплывающая подсказка
  • Единицы цвета в CSS
  • Использование :hover
  • Линейный градиент
  • Наследование в CSS
  • Несколько фоновых картинок
  • Нормальное позиционирование
  • Переходы с помощью :hover
  • Подсветка строк и колонок таблицы
  • Псевдокласс :hover
  • Псевдоклассы в CSS
  • Работа с типографикой
  • Селекторы CSS
  • Состояния кнопок
  • Сочетание с псевдоклассами
  • Спрайты
  • Типы ссылок
  • Установка фона и градиента
  • Фоновая картинка

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *