JavaScript-фильтр hueRotate не работает

Question

Я пытаюсь изменить оттенок изображения (#bgImage) при наведении курсора на кнопку (profIcon) в JavaScript. Этот тип кнопки создается с помощью JS, и их 9.

Вот код, который создает DOM image element, устанавливает его источник, положение, размер и переход. Наконец он присоединяет его к контейнеру. Изображение отображается правильно, где оно должно быть.

Я использую quickID вместо document.getElementById, и он работает без ошибок.

var bgImage = document.createElement("img"); 
bgImage.id = "bgImage"; 
bgImage.src = "./resources/images/backgrounds/profession/selector.jpg"; 
bgImage.style.position = "absolute"; 
bgImage.style.left = "0px"; 
bgImage.style.top = "0px"; 
bgImage.style.width = "100%"; 
bgImage.style.height = "100%"; 
bgImage.style.zIndex = 1; 
bgImage.style.webkitTransition = "all 0.5s ease"; 
quickID("centerdiv").appendChild(bgImage); 

Вот код, который работает, когда я наведите курсор мыши на изображение:

profIcon.onmouseover = function() { 
    var thisNr = this.id.substr(8); //last char of the profIcon ID; number between 0 and 8 
    var newHue = profTomb[thisNr][3]; //this contains the value and only that. 
    console.log(newHue); //always returns the correct value 
    quickID(this.id).style.webkitFilter = "grayscale(0%)"; //this part works, too 
    quickID("bgImage").style.webkitFilter = "hueRotate(" + newHue + "deg)"; 
} 

Моей проблему: по какой-то причине, фильтр не применяется. newHue - либо положительное (75), либо отрицательное значение (-23), и оно вставлено правильно, как показано в журнале консоли. Я использую только префикс поставщика webkit, поскольку использую Google Chrome.

Я подождал до 1 минуты, указав курсор мыши на изображение, думая, что моей системе требуется время для обработки преобразования, но ничего не произошло.

Кто-нибудь знает, в чем проблема?

Answer 1

Правильная строка для использования - hue-rotate, а не hueRotate. Должно работать следующее:

quickID("bgImage").style.webkitFilter = "hue-rotate(" + newHue + "deg)";