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

Question

[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)';
	})
})

Comments

[Алексей Уколов]

Ну нужно менять содержимое вопроса, если вы хотите задать другой - задайте другой.

Answer 1

[Алексей Уколов]

Heart.style

Heart — это коллекция элементов, у неё невозможно изменить стиль. Должно быть button.style, наверное.