如果您单击但不移动鼠标，您将看到按钮的颜色保持为红色！
我想要完成的是在您单击并且不移动鼠标后它仍然会删除/切换.hover class.
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>
该元素保留了hover即使在单击按钮（并且容器被翻译）之后，类也会被调用，因为在鼠标实际移动之前，浏览器似乎不会调用悬停（或鼠标移出）。
解决此问题的一种方法是删除hover类内的click按钮的事件处理程序。但要使其发挥作用hover事件处理程序的代码需要更改为专门在鼠标悬停（悬停在）上添加类并在鼠标悬停（悬停出）时将其删除。这是必要的，因为根据当前代码，即使hover类在单击事件处理程序中被删除，当鼠标再次移动时它会被切换回来（因为在那个时间点，处理程序hover在元素上看不到类）。
对代码的更改实际上可以通过两种方式完成 - 要么使用单独的mouseover and 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
