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

Posted 2023-03-06

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

【英文标题】：How to remove/toggle hover class on an element (that is translated upon click) without having to move the mouse again?

【发布时间】：2016-01-08 23:52:22

【问题描述】：

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

【问题讨论】：

你需要this吗？

谢谢！ @Harry Result is marvelous!

【参考方案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>