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 (Добавлять его при клике, а убирать в момент когда курсор покидает кнопку).

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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