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

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类的按钮被点击后也（和容器被翻译），因为浏览器似乎并没有被调用hover- （或鼠标移出），直到鼠标实际移动。

解决此问题的一种方法是删除按钮的click事件处理程序中的hover类。但为了实现这个功能，hover事件处理程序的代码需要更改为在mouseover（hover-in）上专门添加类，并在鼠标移出（悬停）时将其删除。这是必要的，因为尽管hover类在click事件处理程序中被删除，但在鼠标再次移动的时候会被切换回来（因为在那个时间点，hover的处理程序没有看到类在元素上）。

的变化其实也可以在两种方式的代码 - 或者通过（在我原来的小提琴等），或通过将两个单独的函数来hover处理程序使用单独的mouseover和mouseout功能。当两个函数通过时，第一个函数被悬停在第二个函数上，第二个函数被悬停在外面。

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