我在一张照片上面放了一堆沙发床。
我正在尝试将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下面。
最佳答案
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,它将返回找到的与选择器匹配的第一个元素,并且可以像在代码中一样直接对其进行操作。
关于javascript - 为什么我不能在这里更改zIndex?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33242543/