Блог

Я пытаюсь использовать следующий CSS, и эффект наведения не работает, если я просматриваю HTML / CSS локально через liveserver в VSCode или просто открываю HTML-файл из проводника. Это также не работает, если я загружаю файлы HTML / CSS на сервер. Однако, если я помещаю точные HTML и CSS в CodePen, эффект наведения работает просто отлично.

Когда я просматриваю его локально или на сервере (где наведение не работает), и я переключаю состояние наведения в Chrome DevTools, он действует так, как будто для состояния наведения нет CSS, но если я переключаю состояние фокусировки, оно действительно работает, как ожидалось, и применяет CSS.

Почему этот эффект наведения работает в CodePen — здесь — https://codepen.io/stemlund/pen/BadGJZy , но не локально или при загрузке на сервер?

 .dot-indicators>* {
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  aspect-ratio: 1;
  padding: 0.5em;
  background-color: red;
}

.dot-indicators>*:hover,
.dot-indicators>*:focus {
  background-color: green;
} 

 <div class="dot-indicators flex">
  <button aria-selected="true"><span class="sr-only">Slide title</span></button>
  <button aria-selected="false"><span class="sr-only">Slide title</span></button>
  <button aria-selected="false"><span class="sr-only">Slide title</span></button>
</div>