jQuery mousemove - appliquer un filtre CSS basé sur la position de la souris

Question

J'essaie de mettre en place un événement mousemove très simple, qui applique filtre: (XXdeg) CSS à mon fond div basé sur la position de la souris. Je l'ai fait avec succès dans le passé avec background-color mais cela ne semble pas fonctionner pour la propriété filter.

Voici ce que j'ai:

$(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) + ")"); 
}); 

apprécierions beaucoup si quelqu'un pouvait indiquer où je pourrais aller mal avec cela. La page avec ce code appliqué est ici: http://www.joe-goddard.com

Merci!

Answer 1

Je viens d'essayer ce code, la seule chose que vous êtes absent est l'unité « deg » après la valeur du filtre.

var $document = $(document); 

$document.mousemove(function(e) { 
    var width = $document.width()/255; 
    var pageX = e.pageX/width; 
    var value = 255 - pageX; 

    $(".bg").css("filter", "hue-rotate(" + value + "deg)"); 
}); 

Answer 2

Vous devez spécifier quelle unité sera 255, dans ce cas, deg (degré).

$(".bg").css("filter", "hue-rotate(" + (255 - $pageX) + "deg)"); 

Working codepen example