Как сделать так что бы hover не срабатывал при клике на элемент в первый раз?

Question

[Shu90]

Есть react компонент (карточка товара) у него есть переключение классов по клику (выбран, не выбран) у каждого из этих классов свой эффект hover. Можно ли сделать так что бы при клике на элемент сразу же не срабатывал бы эффект hover для выбранного элемента, а срабатывал бы только после того как курсор уйдёт с карточки по которой кликнули и снова на неё вернётся?

Comments

[Антон Литвиненко]

повесить preventDefault() на ховер и обозначить флаг, который после первого ховера будет менять с тру на фолс. завернуть в проверку на флаг.

[Shu90]

Антон Литвиненко, спасибо, логика да, ясна, но я новичок, как мне в реакте управлять hover? Через событие mouseover можно? Если ему задать preventDefault это сработает для hover?

[Антон Литвиненко]

если на mouseover не сработает, то значит так напрямую вообще нельзя

[Антон Литвиненко]

Shu90, если не выйдет то можно используя тот же флаг при mouseover добавлять класс, к которому привязан ховер

[Shu90]

Антон Литвиненко, спасибо, попробую!

[Shu90]

Антон Литвиненко, в общем все это не очень работает у меня, потому что мне нужно отслеживать наведение на класс а не на элемент, а для этого мне нужно в компоненте написанном на react использовать нативный js (getElement) а я не знаю правильно ли так делать. Не знаете, с пмщью ref это можно решить?