Question

当我将鼠标悬停在JavaScript中的按钮（#bgImage）上时，我正尝试更改图像的profIcon）色调。这种类型的按钮是用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供应商前缀。

我用鼠标光标在图像上等了1分钟，认为我的系统需要时间来处理转换，但没有发生任何事情。

有谁知道这是什么问题？

Answer 1

要使用的正确字符串是hue-rotate，而不是hueRotate。以下应该有效：

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

JavaScript过滤器hueRotate不起作用

1 个答案: