$("button").on("click", () => {
console.log($("button").is(":hover"));
window.scrollTo(0,0);
console.log($("button").is(":hover"));
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button style="margin-top:600px;"> CLICK </button>
// method called on button click
showTab(n) {
this.tabs.each((idx, tab) => {
$(tab).hide();
});
$(this.tabs[n]).show();
this.currentTab = parseInt(n);
window.scrollBy(-100, -100);
window.scrollTo(0,0);
}
at the end of that code the NextButton.is(“:hover”) returns true, it shows also in button style. I cannot figure out why. Any ideas? Is there a way to “unhover” the button with jQuery?
Answer
The function calls are asynchronous. Therefore immediatly after calling scrollTo(..) the console.log(..) gets executed while still hovering the button.
To circumvent this behaviour you would usually use a callback function, that gets called after your initial function has finished.
$("button").on("click", function(){
console.log($("button").is(":hover"));
$('html').animate({
scrollTop: 0
}, 500, function() {
// gets executed after the animation has finihsed
console.log($("button").is(":hover"));
});
})button {
position:absolute;
top: 650px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button> CLICK </button>