Как сделать так, чтобы HTML-ссылки отображали стиль наведения?

Question

У меня есть некоторая разметка HTML на моей главной странице ASP.NET, представляющая основное меню навигации.Три слова, которые ссылаются на три страницы.Мои CSS и HTML включены ниже для вашей справки.

Когда я загружаю страницу, ссылки отображаются с правильным цветом (красным).Если навести указатель мыши на ссылку, ссылка изменится на правильный цвет (синий).Пока все хорошо.Нажатие на ссылку изменяет цвет ссылки на правильный цвет (желтый).Две оставшиеся ссылки все еще красные / синие, как и ожидалось.При нажатии на вторую ссылку эта ссылка также становится желтой.Теперь у меня есть две желтые ссылки.Ни одна желтая ссылка не отображает цвет при наведении (синий), как я бы предпочел.Нажатие на третью ссылку также приводит к тому, что она становится желтой, и ни одна из ссылок не отображает стиль наведения.

Несмотря на то, что была нажата ссылка, я бы хотел, чтобы цвет сохранялся и отображался цвет наведения.Как мне это сделать?Это проект веб-приложения ASP.NET, но на данный момент я использую только прямой HTML.

/* --- css --- */

a:link
{
    color: red;
    text-decoration: none;
}

a:hover
{
    color: blue;
    text-decoration: none;
}

a:active
{
    color: green;
    text-decoration: none;
}

a:visited
{
    color: yellow;
    text-decoration: none;
}



/* --- HTML --- */

<p class="MenuItems">
    <a href="1.aspx">Cars. </a>
    <a href="2.aspx">Trucks. </a>
    <a href="3.aspx">Vans. </a>
</p>

Answer 1

Как описано здесь , объявление :hover должно приходить ПОСЛЕ объявлений :visited и :active.

По сути, в каскаде ваших текущих стилей вы выиграли 'никогда не вижу цвета :hover.

Answer 2

Просто используйте это:

a:hover
{
    color: blue ! important;
    text-decoration: none ! important;
}

или как описано - используйте этот порядок:

a:link
{
    color: red;
    text-decoration: none;
}

a:active
{
    color: green;
    text-decoration: none;
}

a:visited
{
    color: yellow;
    text-decoration: none;
}

a:hover
{
    color: blue;
    text-decoration: none;
}

Answer 3

Ваш

a:hover

декларация должна прийти после вашего

a:visited

объявление в таблице стилей, потому что посещенное состояние в настоящее время имеет приоритет. Чтобы избежать этого, всегда ставьте hover в конце блока объявления стилей.

a: ссылка -> a: посещенный -> a: активный -> a: hover - оптимальный порядок.