Почему не сразу срабатывает изменение hover?

Question

[alexandr_ftf]

Всех приветствую.
Суть такая. После клика на кнопке у неё посредством jquery изменяется hover свойство. Но изменение начинает работать только после того, как я отведу мышку от самой кнопки. А непосредственно после момента нажатия hover (подсветка) неизменен. Как это исправить?

Изменяю так:

$(this).hover(function(){
         $(this).css("box-shadow", "none")
})

Answer 1

[Даниил Братухин]

Метод .hover() регистрирует обработчик для событий mouseenter и mouseleave. Поскольку курсор в это время уже находится над элементом, в следующий раз ваша функция будет вызвана только по событию mouseleave – как раз тогда, когда вы отведете курсор с кнопки.

Создайте CSS класс и добавляйте его по клику.

.flat:hover {
  box-shadow: none;
}

// В обработчике нажатия
$(this).addClass('flat')

Answer 2

[alexandr_ftf]

Не работает. Инспектор показывает, что класс присваивается только при отведении курсора.

Comments

[Даниил Братухин]

А вы точно это делаете внутри .click(), а не .hover()? Потому что уж очень похоже на последнее :)

$('селектор кнопки').click(function () {
  $(this).addClass('flat')
})

[alexandr_ftf]

Даниил Братухин, Блин, косяк. Всё просто. Спасиб)