Как сделать так, чтобы ссылки меняли цвет только после посещения - PullRequest
Новая
       28

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

0 голосов
/ 15 апреля 2019

Когда я применяю стиль: посещения после исходного стиля в моем коде, стиль: посещение переопределяет стиль по умолчанию, который не дает эффекта от посещения ссылки.

Стиль по умолчанию, который я хочу, это .btn

Стиль, который мне нужен после посещения ссылки, - это .btn: посещения

Я попытался переместить стиль: посещенный выше и ниже стиля: hover. Из того, что я прочитал, стиль :ited должен идти выше стилей: hover. Но он переопределяет стиль по умолчанию, который я хочу применить к ссылке, как сейчас. 

<!-- I want this styling to be the default -->
.btn {
  margin-left: 10px;
  margin-right: 10px;
  background-color: darkgrey;
  color: darkred;
}

<!-- I want this styling to be applied only once visted -->
.btn:visited {
  color: orange;
}


.btn:hover {
  /* Applies to links under the pointer */
  font-weight: bold;
  background-color: darkgrey;
  color: darkred;
}

Мои ожидаемые результаты - ссылка имеет фон темно-серого цвета и цвет текста темно-красного цвета.

Фактический результат - ссылка, имеющая только оранжевый цвет текста, который я хочу получить только после посещения ссылки.

1 Ответ

0 голосов
/ 16 апреля 2019

Одна из причин, по которой вы не работаете, состоит в том, что <!-- --> не являются действительными комментариями CSS и полностью нарушают следующее правило (потому что 

<!-- ... -->
some-selector

... не соответствует some-selector).

/* ... */, однако - это действительный комментарий CSS: 

@import url(https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css);

/* I want this styling to be the default */
.btn {
  margin-left: 10px;
  margin-right: 10px;
  background-color: darkgrey;
  color: darkred;
}

/* I want this styling to be applied only once visted */
.btn:visited {
  color: orange;
}


.btn:hover {
  font-weight: bold;
  background-color: darkgrey;
  color: darkred;
}
<a class="btn" href="#test">test</a>

Примечание: Не проверять :visited в режиме инкогнито! Поскольку в этом режиме ничего не сохраняется в истории, следовательно, ничто не может быть :visited.
Чтобы правильно проверить это, убедитесь, что вы не в режиме инкогнито и вместо этого очистите кэш (историю просмотров).

Если ваша проблема в том, что браузер делает , запомните, какие ссылки вам :visited, ну вот как это должно работать.
Если у якоря на странице есть href, который присутствует в истории вашего браузера, а состояние :visited имеет стиль (со спецификой выше применяемого в настоящее время стиля), будет применяться стиль :visited. Это ожидаемое поведение. Если вы хотите изменить способ его работы (не рекомендуется), не стилизуйте :visited по-другому и применяйте пользовательский класс для взаимодействия с пользователем.

* * Пример 1 042: 

$('.btn').on('click', function(){
  $(this).addClass('visited');
})
@import url(https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css);

/* I want this styling to be the default */
.btn {
  margin-left: 10px;
  margin-right: 10px;
  background-color: darkgrey;
  color: darkred;
}

/* I want this styling to be applied only once visted */
.visited {
  color: orange;
}


.btn:hover {
  font-weight: bold;
  background-color: darkgrey;
  color: darkred;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a class="btn" href="#test">test</a>
...