I am trying to cancel (.off) the .hover on function, can you tell me what is wrong with my code?
$("document").ready(function(){
$("button").hover(function(){
$("h1").hide();
},
function(){
$("h1").show()}
);
$("button").click( function(){
alert("turning off hover")
$("button").off( "hover" )
} );
});
I do get the alert, but the .hover is still active..
Try with mouseenter and mouseout event instead
$( "#yourButton" ).mouseenter(function() {
$("#yourH1").hide();
});
$( "#yourButton" ).mouseout(function() {
$("#yourH1").show();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="yourButton">Hover me</button>
<h1 id="yourH1"> Hey </button>