0

Есть карточка товара. При клике меняется ее внешний вид - добавляется некий класс active. После добавления класса появляется hover эффект (.active:hover). Но надо реализовать так, что бы hover срабатывал, только при повторном наведении на карточку. То есть, когда произошел клик по карточке, курсор находится над ней и hover срабатывает тут же. А надо, что бы не срабатывал.

2 ответа 2

1

Если нужно использовать именно 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>

0

Вопрос закрыт. Решение:

Добавить класс "block" который не будет давать сработать стилям написанным для :hover (Добавлять его при клике, а убирать в момент когда курсор покидает кнопку).

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.