I have implemented a custom image hover effect for links in my text using mousemove. However, I want to disable this feature when a specific media query is reached and have the images simply serve as clickable links without the hover effect. I attempted to use the off() method to achieve this, but it doesn't seem to be working. Can anyone suggest a better solution? Thanks.
$(document).ready(function() {
$('.text-hover').mousemove(function(e) {
$img = $("#" + $(this).data('image-id'))
$img.stop(1, 1).show().fadeIn("slow");
$img.offset({
top: e.pageY + 20,
left: e.pageX + 10
});
}).mouseleave(function() {
$img = $("#" + $(this).data('image-id'))
$img.hide();
});
window.addEventListener('resize', function(){
if(window.innerWidth > 568){
$('html').off('mousemove');
}
});
});