jQuery mousemove - применение CSS-фильтра на основе положения мыши

Question

Я пытаюсь настроить очень простое событие mousemove, которое применяет фильтр: (XXdeg) CSS на мой фон div на основе положения мыши. Я сделал это успешно в прошлом с фоновым цветом, но он, похоже, не работает для свойства фильтра.

Вот что у меня есть:

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

бы очень признателен, если кто-то может указать, где я мог бы идти не так с этим. Страница с использованием этого кода приведена здесь: http://www.joe-goddard.com

Спасибо!

Answer 1

Я просто попытался этот код, единственное, что вам не хватает является «град» единица после значения фильтра.

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

Вы должны указать какой блок будет 255, в данном случае deg (степень).

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

Working codepen example