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

109
10

Я пытаюсь изменить изображение (#bgImage) при наведении profIcon на кнопку (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 минуты, указав курсор мыши на изображение, думая, что моей системе требуется время для обработки преобразования, но ничего не произошло.

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

спросил(а) 2021-01-19T23:29:53+03:00 6 месяцев, 2 недели назад
1
Решение
64

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

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

ответил(а) 2021-01-19T23:29:53+03:00 6 месяцев, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема