@tebekonez

Почему эффект не появляется нажатии но работает при наведении?

HTML
<div class="heart__container lous__heart">
                                    <button class="heart " id="heart"></button>
</div>


CSS
.heart{
	width: 100px;
	height: 100px;
	background: url(https://cssanimation.rocks/images/posts/steps/heart.png) center center;
	background-position: 0 0;
	cursor: pointer;
	animation: fave-heart 1s steps(28);
}

@keyframes fave-heart {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: -2800px 0;
	}
}


JS
const Heart = document.querySelectorAll('.heart');

Heart.forEach(button => {
	button.addEventListener('click', function () {  
		Heart.style.backgroundPosition ='-2800px 0'
		Heart.style.transition = 'background 1s steps(28)';
	})
})
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега JavaScript
Heart.style
Heart — это коллекция элементов, у неё невозможно изменить стиль. Должно быть button.style, наверное.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
03 дек. 2021, в 22:18
1000 руб./за проект
03 дек. 2021, в 21:42
10000 руб./за проект