Jquery 如何在不必再次移动鼠标的情况下删除/切换元素上的悬停类（在单击时转换）？

如果您单击并不移动鼠标，您将看到按钮的颜色仍为红色！ 我想要完成的是，在单击鼠标且不移动鼠标后，它仍然会删除/切换

。hover

类

$（函数（）{
变量$Btn=$（'.button'）；
$Btn.hover（函数（）{
$（this.toggleClass（“悬停”）；
});
$Btn.on（“单击”，函数（）{
$（this.toggleClass（'active'））
$（'.move'）.toggleClass（'angle'）；
});
});
.move{
边框：1px实心#000000；
填充：10px；
转变：转变。2轻松；
/* 
注意到问题处于“过渡期”
*/
}
.按钮.悬停{
颜色：红色；
}
.角度{
转换：转换（100px，0）；
}

点击仍然是红色？
即使在单击按钮（并翻译容器）之后，元素仍保留
hover
类，因为在鼠标实际移动之前，浏览器似乎不会调用hover out（或mouseout）

解决此问题的一种方法是删除按钮的
click
事件处理程序中的
hover
类。但要使其工作，需要更改
hover
事件处理程序的代码，以便在mouseover（hover-in）上专门添加类，并在mouseout（hover-out）上删除它。这是必需的，因为根据当前代码，即使在click事件处理程序中删除了
hover
类，它也会在再次移动鼠标时切换回原来的状态（因为此时，
hover
的处理程序在元素上看不到该类）

对代码的更改实际上可以通过两种方式完成：使用单独的
mouseover
和
mouseout
函数（就像我原来的小提琴一样），或者将两个单独的函数传递给
hover
处理程序。当传递两个函数时，第一个函数在hover-in时被调用，第二个函数在hover-out时被调用


$（函数（）{
变量$Btn=$（'.button'）；
$Btn.悬停（函数（）{
$（此）.addClass（“悬停”）；
}，函数（）{
$（this.removeClass（“hover”）；
})；/*第一个函数在mouseover上执行，第二个函数在mouseout上执行*/
$Btn.on（“单击”，函数（）{
$（this）.removeClass（'hover'）；//单击按钮时删除hover类
$（'.move'）.toggleClass（'angle'）；
});
});
.move{
边框：1px实心#000000；
填充：10px；
转变：转变。2轻松；
/* 
注意到问题处于“过渡期”
*/
}
.按钮.悬停{
颜色：红色；
}
.角度{
转换：转换（100px，0）；
}

点击仍然是红色？
这是您需要的吗？谢谢@骚扰