Можно как то запретить срабатывание :hover css до повторного наведения?

Question

[lamer350]

Я думаю сталкивались многие, в чем суть:
Имеем допустим кнопку, которая по клику получает дополнительный класс active но у кнопки есть эффект :hover который тут же срабатывает так как после клика курсор по прежнему находится на кнопке.
Вместо того чтобы видеть зеленую кнопку после клика, мы видим синюю так как hover внес свои поправки.

Как запретить срабатывание :hover сразу, а разрешить только при повторном наведении курсора?

Comments

[Dima Polos]

Можно код? Я правильно понял, что стили из ховер перебивает стили класса active? Или active это псевдокласс?

[Варлам Ерофеич]

который тут же срабатывает

А мне казалось, что :hover срабатывает ещё до клика... (при наведении, задолго до :active)))

[Владимир Ионенко]

попробуйте так:

element:not(.active):hover { 
   color: red;
 }

[lamer350]

Владимир Ионенко, не совсем то, залил в песочницу код. П умолчанию кнопка красная, ховер - оранжевый, активная кнопка зеленая, а ховер активной кнопки - синий.
Если навести на кнопку и кликнуть - она станет синей, так как hover перероет цвет. А нужно чтобы по клику и пока не увести курсор и навести обратно - кнопка была зеленой. То же будет если сбросить класс active (чтобы была красной, а не оранжевой)

[Александр Маргинал]

Я бы обрабатывал это все на js добавляя и убирая классы для всего. Больше возможностей появится со счётчиком наведения, сбросом и так далее

Answer 1

[NIkita Bykov]

Предлагаю добавить класс "block" который не будет давать сработать стилям написанным для :hover (Добавлять его при клике, а убирать в момент когда курсор покидает кнопку). Долго объяснять словами, лови ссылку там все понятно, если что спрашивай.
https://jsfiddle.net/2zymqf09/

Comments

[lamer350]

да, на самом деле так и сделал по итогу, думал просто может есть какое css свойство о котором я не знаю)

Answer 2

[Денис Богданов]

Сделайте так

.active:hover {
  background: none; // свойства отменяющие hover без класса active
}

Comments

[lamer350]

не то, у active тоже есть hover