Перейти к содержимому

Как можно изменить цвет посещенной ссылки

  • автор:

Как задать цвет посещённых ссылок?

Как только пользователь открывает ссылку, она помечается как посещённая и меняет свой цвет на фиолетовый, установленный по умолчанию. Чтобы задать вид оформления посещённых ссылок, используйте псевдокласс :visited, который добавляется к селектору A , как показано в примере 1.

Пример 1. Цвет посещённых ссылок

Результат данного примера показан ни рис. 1. Обычные ссылки заданы красным цветом, а посещённые — серым.

Цвет посещённой ссылки

Рис. 1. Цвет посещённой ссылки

См. также

  • Атрибут vlink
  • Виды ссылок
  • Псевдокласс :visited
  • Псевдоклассы в CSS
  • Типы ссылок

Как убрать фиолетовый цвет ссылок в css

Цвет ссылок, по умолчанию, меняется в одном из трёх случаев:

  • Ссылка, по которой пользователь уже перешёл. За это состояние отвечает псевдокласс :visited
  • Ссылка при наведении курсора мыши. Изменить стили можно с помощью псевдокласса :hover
  • Ссылка при клике, но до момента, как произошёл переход. Определить стили у такой ссылки можно у псевдоэлемента :active
 href="https://ru.hexlet.io">На сайт Хекслета 
a:hover  /* Цвет при наведении */ color: red; > a:visited  /* Цвет посещённой ссылки */ color: green; > a:active  /* Цвет ссылки при клике */ color: blue; > 

Как поменять цвет посещенной ссылки , но не везде

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

Отслеживать
задан 27 сен 2016 в 11:26
1,395 19 19 серебряных знаков 49 49 бронзовых знаков
Что такое «убрать цвет»? Сделать цвет ссылки равным цвету фона?
27 сен 2016 в 11:59

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

a, a:visited, a:hover, a:active

Отслеживать
ответ дан 27 сен 2016 в 11:36
1,753 1 1 золотой знак 15 15 серебряных знаков 21 21 бронзовый знак

Вы сказали, что «на сайте есть разные блоки с разными цветами», т.е. эти блоки имеют свой класс, этим вы и можете воспользоваться.

Например у Вас используются блоки с классом .a1 и .a2. Если Вам надо поменять цвет посещённой ссылки в .a1, то сделайте так:

.a1 a:visited

А если нужно поменять цвет посещённой ссылки везде, кроме этих DIVов, то пишите так:

a:visited .a1 a:visited, .a2 a:visited

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

Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :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 не будет опубликован. Обязательные поля помечены *