CSS li a: посещение основного состояния наведения на мобильном телефоне

Question

У меня проблемы с посещенными ссылками и состояниями наведения. Значки социальных сетей в нижней части моего сайта имеют красный цвет для состояния наведения списка. После того, как пользователь заходит по ссылке, она остается белой. На мобильных устройствах состояния наведения не очень важны, красного цвета нет. Однако при нажатии на одну из социальных иконок она остается красной. Я попытался установить посещаемый цвет на белый, что убирает значок, оставшийся красным. Однако возврат к настольным устройствам означает, что состояние зависания перестает работать.

Это код:

footer li a:hover {
color: #e91d26;
}

footer li a:active {
color: #fff;
}

footer li a:link {
color: #fff;
}

footer li a:visited {
color: #fff;
}

Прикреплено изображение, показывающее проблему на мобильных устройствах с нижним колонтитулом или прокомментированным посетителем. out.

a: посетил закомментированный белый

Answer 1

Это просто проблема CSS Специфичность .

Чтобы это исправить, просто переместите декларацию footer li a:hover вниз, ниже footer li a:visited.

вот так:

footer li a:active {
    color: #fff;
}

footer li a:link {
    color: #fff;
}

footer li a:visited {
    color: #fff;
}

/* Move : hover down here.. */
footer li a:hover {
    color: #e91d26;
}

Или вы можете добавить !important к свойству color в объявлении :hover, но это скорее хак и не рекомендуется ..

/* not suggested... but would work */

footer li a:hover {
    color: #e91d26; !important;
}