0

Учу html и задался вопросом: почему блок при нажатии не меняет цвет если задан псевдоелемент visited?

.body {
  background-color: darkslategray;
}

.circle2 {
  background-color: darkgray;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50px;
  left: 40px;
  box-shadow: 4px brown;
}

.circle2 a {
  border-radius: 50%;
  display: block;
  height: 100%;
}

.circle2 a:visited {
  background-color: brown;
  transition: 700ms;
}
<body>
  <div class="circle2">
    <a href="#"></a>
  </div>
</body>

2
  • цвет задан у ссылки, а не у блока. А размер ссылки т.к. в ней нет текста = 0.
    – ArchDemon
    24 янв 2022 в 18:31
  • Ответы - в ответы
    – Object417
    24 янв 2022 в 18:32

1 ответ 1

1

Я поменял местами <a> и <div> в html-коде и в css-коде заменил a:visited на a:focus.

.body {
  background-color: darkslategray;
}

.circle2 {
  background-color: darkgray;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50px;
  left: 40px;
  box-shadow: 4px brown;
}

.circle2 a {
  border-radius: 50%;
  display: block;
  height: 100%;
}

a:focus .circle2 {
  background-color: brown;
  transition: 700ms;
}
<body>
  <a href="#"><div class="circle2">
    
  </div></a>
</body>

4
  • :visited !== :focus
    – UModeL
    24 янв 2022 в 18:38
  • @UModeL ссылка :visited будет изначально (до клика), т.к. она указывает на этот же документ
    – DiD
    24 янв 2022 в 18:42
  • @DiD Спасибо большое! Буду знать.
    – doogel
    24 янв 2022 в 18:45
  • @doogel На самом деле, вероятно, вам нужно по клику ссылки добавить класс элементу .circle2, который нужно тоже описать в CSS. Например, класс .highlight.
    – DiD
    24 янв 2022 в 18:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.