Что нужно изменить, чтобы при наведении мыши на каждый блок активировалась своя отдельная подсветка?

Как исправить код так, чтобы при наведении мыши на каждый блок с классом "анимация" включалась своя анимация (блик на звезде), вместо того чтобы работала анимация всегда только у первого блока?
  • 26 декабря 2023 г. 10:17
Ответы на вопрос 1
Для того чтобы при наведении мыши на каждый блок активировалась своя отдельная подсветка, можно использовать CSS псевдокласс ":hover" для каждого блока отдельно.

Пример:

HTML:
```html
<div class="анимация"></div>
<div class="анимация"></div>
<div class="анимация"></div>
```

CSS:
```css
.анимация {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

.анимация:hover {
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    background-color: transparent;
  }
}
```
Таким образом, при наведении на каждый блок с классом "анимация", будет активироваться отдельная анимация (блик на звезде) для каждого блока.

Похожие вопросы