Question

我有一堆div位于图像上方。我试图让div隐藏的分数出现在鼠标悬停上。为了实现这一点，我尝试将div的zIndex设置为低于图像的zIndex，以便显示它。但我似乎可以选择所有的div。

这是我的javascript代码：

window.onload = function () {
    var block = document.getElementById('container');

    block.addEventListener('mouseover', function () {
        var blocks = document.querySelectorAll("#container div");
        var index = 0, length = blocks.length;
        for (var index = 0; index < length; index++) {
            blocks[index].style.zIndex = 2;
        }
    });

    for (var i = 0; i < 40; i++) {
        for (var j = 0; j < 40; j++) {
            var div = document.createElement("div");
            div.className = "block";
            div.style.left = j * 25 + 'px';
            div.style.top = i * 25 + 'px';
            div.style.display = "inline-block";
            div.style.verticalAlign = "top";
            div.style.zIndex = "1";
            document.getElementById("container").appendChild(div);
        }
        var jump = document.createElement("br");
        document.getElementById("container").appendChild(jump);
    }
};

我哪里出错了？谢谢。 div容器的背景图像位于创建的内部div之下。

Answer 1

document.querySelectorAll返回一个元素数组。你需要单独循环遍历它们。

var blocks = document.querySelectorAll("#container div");
var index = 0, length = blocks.length;
for ( ; index < length; index++) {
    blocks[index].style.zIndex = 1;
}

如果你只是在寻找单个元素，你也可以使用document.querySelector，它返回它找到的第一个与选择器匹配的元素，你可以像在代码中一样直接使用它。

为什么我不能在这里更改zIndex？

1 个答案: