I'm attempting to create a simple mousemove event that changes the CSS filter property of my background div based on the position of the mouse. While I have successfully achieved this in the past with background-color, I am now encountering issues with the filter property.
Below is the code I am using:
$(document).mousemove(function(e){
var $width = ($(document).width())/255;
var $height = ($(document).height())/255;
var $pageX = parseInt(e.pageX / $width,10);
var $pageY = parseInt(e.pageY / $height,10);
$(".bg").css("filter", "hue-rotate(" + (255 - $pageX) + ")");
});
If anyone could kindly point out where I might be making a mistake, I would greatly appreciate it. The webpage with this code implemented can be found here:
Thank you!