如何 remove/toggle 将 class 悬停在一个元素上（即在单击时转换）而无需再次移动鼠标？

Question

如果单击但不移动鼠标，您会看到按钮的颜色保持为红色！我想要完成的是在你点击并且不移动鼠标之后它仍然 removes/toggles .hover class.

$(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 class 即使在单击按钮（并且容器被翻译）之后也是如此，因为浏览器似乎没有调用 hover-out（或 mouseout）直到鼠标真正移动。

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

代码的更改实际上可以通过两种方式完成——使用单独的 mouseover 和 mouseout 函数（就像我原来的 fiddle 一样）或者通过传递两个单独的函数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>

如何 remove/toggle 将 class 悬停在一个元素上（即在单击时转换）而无需再次移动鼠标？

How to remove/toggle hover class on an element (that is translated upon click) without having to move the mouse again?

css

jquery

transition

css-transitions