установка ссылки: посетил в то же состояние, что и ссылки: и ссылка:

Question

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

Answer 1

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

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

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

a:hover {color: white !important;}

Answer 2

Это вполне возможно, как указывает sblundy. Однако, если вы создадите такое правило, больше не будет визуальной подсказки, что пользователь наводит курсор на ранее посещенную ссылку.

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

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

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

РЕДАКТИРОВАТЬ: CSS2 позволяет объединять псевдоклассы. Это можно использовать для устранения [потенциальной] проблемы юзабилити, которую создает ваш запрос.

a:visited:hover { }

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

Answer 3

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

Придерживаться: фокус здесь обычно тоже неплохая идея.

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

Answer 4

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

a:visited, a:hover {
  ...
}

Answer 5

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

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