Есть карточка товара. При клике меняется ее внешний вид - добавляется некий класс active. После добавления класса появляется hover эффект (.active:hover). Но надо реализовать так, что бы hover срабатывал, только при повторном наведении на карточку. То есть, когда произошел клик по карточке, курсор находится над ней и hover срабатывает тут же. А надо, что бы не срабатывал.
Если нужно использовать именно hover из css, то самый простой вариант - использовать событие mouseout. То есть после клика добавляется класс .active, а после отведения мыши добавляется ещё один класс .mouse-out.
const btn = document.querySelector('#btn')
let isButtonClicked = false
btn.addEventListener('click', () => {
btn.classList.add('active')
btn.innerText = 'А теперь отведи указатель'
isButtonClicked = true
})
btn.addEventListener('mouseout', () => {
if (isButtonClicked) {
btn.classList.add('mouse-out')
btn.innerText = 'Наведи на меня указатель'
}
}).active {
background-color: red;
}
.mouse-out:hover {
background-color: blue !important;
}<div>
<button id="btn">Нажми меня</button>
</div>Вопрос закрыт. Решение:
Добавить класс "block" который не будет давать сработать стилям написанным для :hover (Добавлять его при клике, а убирать в момент когда курсор покидает кнопку).