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

我有一堆位于图像顶部的div。我想让div隐藏的分数出现在鼠标悬停上。为了达到这个目的，我尝试将div的zIndex设置为低于图像的zIndex值，以便显示出来。但我似乎可以选择所有的div。为什么我不能在这里更改zIndex？

这里是我的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之下的背景图像。

来源

2015-10-20 abedzantout

可能是因为'Array'没有属性'style'。 – BenM

另外请记住，这些元素需要被绝对定位，以便'z-index'完全可以工作（呵呵 - 感谢@ j08691指出了这一点 - 尽管保留我原来的评论） – eithed

'mousehover' event does not存在。 'mouseover'是正确的。 – Sebas

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发现，选择相匹配，您可以为您最初在你的代码对直接工作。

来源

2015-10-20 17:02:38 AtheistP3ace

我会现在测试它，谢谢你的提示 – abedzantout

我在我的问题中添加了进一步的解释。谢谢您的帮助 – abedzantout

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

回答

相关问题