Установка: посещенной ссылки в то же состояние, что и: ссылка и: наведение

Я работаю над идеей, в которой моя ссылка a: имеет одно состояние (синий, без подчеркивания и т. д.) С белым a: hover. Мне нужны мои посещенные ссылки, чтобы иметь такое же состояние как a:link и a:hover. Это возможно? поддерживается в наиболее распространенных браузерах?

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
9
0
25 550
5

Ответы 5

Вот как вы можете стилизовать теги a (обычные и посещенные) и стилизовать наведение отдельно.

a
{
    color:#6c7492;
    font-weight:bold;
    text-decoration:none;
}
a:hover
{
    border-bottom:1px solid #6c7492;
}

Если вы используете эти псевдоклассы, я не понимаю, почему бы и нет.

a:visited, a:hover {
  ...
}
a, a:link, a:hover, a:visited, a:active {text-decoration: none; color: blue;}

должен работать во всех браузерах с поддержкой CSS, хотя это плохая идея (в настоящее время не в сети, Google Cache)

Чтобы сделать a:hover белым, либо удалите его из приведенного выше правила и сделайте для него специальное правило, либо добавьте просто:

a:hover {color: white !important;}

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

Также не забудьте указать правила в таком порядке:

a:link { }
a:visited { }
a:hover { }
a:active { }

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

Обновлено: CSS2 позволяет объединять псевдоклассы в цепочку. Это может быть использовано для решения [потенциальной] проблемы удобства использования, которую создает ваш запрос.

a:visited:hover { }

Однако я не знаю, широко ли поддерживается это соглашение.

Мнемоника, которую меня научили запоминать, в каком порядке помещать ваши ссылки CSS, - это «LoVe HAte»: ссылка, посещено, наведено, активно.

Придерживаться: сосредоточиться на этом тоже, как правило, неплохая идея.

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

Другие вопросы по теме