如何移除/切换元素（即点击转换）上的悬停类，而不必再次移动鼠标？ [英] How to remove/toggle hover class on an element (that is translated upon click) without having to move the mouse again?

问题描述

如果您点击而不移动鼠标，您会看到按钮的颜色仍然是红色！
我想要完成的是你点击后不移动鼠标，它仍然删除/切换 .hover 类。

jsFiddle上的示例

  $（function（）{var $ Btn = $（'。button'）; $ Btn.hover（function（）{$（this）.toggleClass（hover）; ）; $ Btn.on（click，function（）{$（this）.toggleClass（'active'）$（'。move'）。toggleClass（'angle'）;}）;}）; c $ c> 

  .move {border：1px solid＃000000; padding：10px; transition：transform .2s ease; / *已注意到问题在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>  
 

>


解决方案

即使点击按钮后，元素仍保留 hover 容器被翻译），因为浏览器似乎没有调用悬停（或mouseout）直到鼠标实际移动。



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

代码实际上可以通过两种方式完成 - 通过使用单独的 mouseover 和 mouseout 函数（像在我的原始小提琴）或者通过传递两个单独的函数到 hover 处理程序。当传递两个函数时，第一个函数在悬停时调用，第二个函数在悬停时调用。

  $（function var $ Btn = $（'。button'）; $ Btn.hover（function（）{$（this）.addClass（hover）;}，function（）{$（this）.removeClass（hover） ;}）; / *第一个函数在鼠标悬停时执行，第二个在mouseout * / $ Btn.on（click，function（）{$（this）.removeClass（'hover'）;按钮被点击$（'。move'）。toggleClass（'angle'）;}）;}）;  

  .move {border：1px solid＃000000; padding：10px; transition：transform .2s ease; / *已注意到问题在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>  
 

>

If you click and don't move your mouse you'll see the button's color remaining as red! What I want accomplish is after you click and don't move the mouse it still removes/toggles .hover class.

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>

解决方案

The element is retaining the hover class even after the button is clicked (and container is translated) because the browser doesn't seem to be calling the hover-out (or mouseout) till the mouse is actually moved.

One way to fix this would be to remove the hover class within the click event handler of the button. But for this to work the hover event handler's code needs to be changed to specifically add class on mouseover (hover-in) and remove it on mouseout (hover-out). This is needed because as per current code even though hover class is removed within the click event handler, it gets toggled back on the moment the mouse is moved again (because at that point in time, the handler for hover doesn't see the class on the element).

The change to the code can actually be done in two ways - either by using separate mouseover and mouseout functions (like in my original fiddle) or by passing two separate functions to hover handler. When two functions are passed, the first one gets called on hover-in and the second on 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>

这篇关于如何移除/切换元素（即点击转换）上的悬停类，而不必再次移动鼠标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！