jquery – 如何删除/切换元素上的悬停类(在单击时翻译)而不必再次移动鼠标？

解决此问题的一种方法是在按钮的单击事件处理程序中删除悬停类.但为了实现这一点,需要将hover事件处理程序的代码更改为在mouSEOver(hover-in)上专门添加类,并在mouSEOut(hover-out)上删除它.这是必需的,因为根据当前代码,即使在click事件处理程序中删除了悬停类,它也会在鼠标再次移动时切换回来(因为在那个时间点,悬停的处理程序没有看到类在元素上).

对代码的更改实际上可以通过两种方式完成 – 通过使用单独的mouSEOver和mouSEOut函数(比如在我原来的小提琴中)或通过将两个单独的函数传递给悬停处理程序.当两个函数通过时,第一个函数在hover-in上调用,第二个函数在hover-out上调用.

$(function () {
  var $Btn = $('.button');

  $Btn.hover(function () {
    $(this).addClass("hover");
  },function () {
    $(this).removeClass("hover");
  }); /* first function is executed on mouSEOver,second on mouSEOut */

  $Btn.on("click",function () {
    $(this).removeClass('hover'); // remove the hover class when button is clicked
    $('.move').toggleClass('angle');
  });
});

.move {
  border:1px solid #000000;
  padding: 10px;
  transition: transform .2s ease;
  /* 
  have noticed issue is in "transition" 
  */
}
.button.hover {
  color: red;
}
.angle {
  transform: translate(100px,0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="move">
    <button class="button">on click still red?</button>
</div>