如何删除/切换元素上的悬停类（单击时翻译）而无需再次移动鼠标？

Question

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

Example on jsFiddle

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

  $Btn.hover(function() {
    $(this).toggleClass("hover");
  });


  $Btn.on("click", function() {
    $(this).toggleClass('active')
    $('.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>

Answer 1

即使在单击按钮（并且容器被翻译）之后，该元素仍保留 hover 类，因为在鼠标实际移动之前浏览器似乎不会调用悬停（或鼠标悬停）。

解决此问题的一种方法是删除按钮的click 事件处理程序中的hover 类。但要使其正常工作，hover 事件处理程序的代码需要更改为专门在鼠标悬停（悬停）时添加类并在鼠标悬停（悬停）时将其删除。这是必需的，因为根据当前代码，即使在单击事件处理程序中删除了 hover 类，它也会在鼠标再次移动时切换回来（因为在那个时间点，hover 的处理程序没有看不到元素上的类）。

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

$(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>