当鼠标移到立方体上时如何使其变成黑色

Question

如何获得在网格中制成的多维数据集，使其在鼠标经过时变黑？ 任何帮助，将不胜感激。

function Grid(z) {
    for (y=0; y < z; y++) {
        for (x=0; x < z; x++) {
            size = 700 / z;
            var div = document.querySelector('#container');
            var block = document.createElement('div');
            block.style.height = size + 'px';
            block.style.width = size + 'px';
            block.classList.add('cube');

            div.appendChild(block);
        }
    }      
}

function changeBlockColor() {
    Grid(16);

    var s = document.querySelector('.cube');
    s.addEventListener('onmouseover', function(){
        s.setAttribute('style', 'background: black');
    });
}

changeBlockColor();

Answer 1

我将使用CSS来实现此效果。

.cube {
  background-color:red;
}
.cube:hover {
  background-color: black;
}

Answer 2

以下是针对您是否要在完成将鼠标悬停（然后悬停）之后将多维数据集保持黑色的情况 。

首先，您的s = document.querySelector('.cube'); 将使s 仅指向类cube 的第一个元素 。 为了解决这个问题，使s类的所有元件的阵列cube ，使用s = document.querySelectorAll('.cube'); 代替。

接下来，您需要遍历数组s，并将事件侦听器添加到其所有元素：

 for(var i = 0; i < s.length; i++) { s[i].addEventListener('mouseover', function(){ this.setAttribute('style', 'background: black'); }); } 

请注意在处理程序中使用this 。 在处理程序代码内部， this是指触发事件的对象（在您的情况下，鼠标悬停在该多维数据集上）。

Answer 3

您想要的事件名称是mouseover ，而不是onmouseover

另外， querySelector只会找到第一个匹配的元素，因此您需要改用querySelectorAll或getElementsByClassName

最后，您需要遍历所有匹配的元素，这些元素是在Object中返回的，而不是在Array中返回的，因此您需要使用for循环。

解

 function createGrid(z) { for (var y = 0; y < z; ++y) { for (var x = 0; x < z; ++x) { var size = 700 / z; var div = document.getElementById('container'); var block = document.createElement('div'); block.style.height = size + 'px'; block.style.width = size + 'px'; block.classList.add('cube'); div.appendChild(block); } } changeBlockColor() } function changeBlockColor(){ var cubes = document.querySelectorAll('.cube') for (var i = 0; i < cubes.length; i++) { cubes[i].addEventListener("mouseover", function(e) { e.target.classList.add('active') }) } } createGrid(16); 

 #container { display: flex; flex-wrap: wrap; } .cube { background-color: red; } .active { background-color: black; } 

 <div id="container"></div> 

实施细节

• 命名在JS中都是首选项，但是传统上，以大写字母开头的名称是用于class ，因此我将您的函数重命名为createGrid
• 在结束createGrid我打电话changeBlockColor ，而不是调用createGrid从内changeBlockColor ，在逻辑上更有意义。
• 我创建了一个称为active的CSS类来处理颜色更改，因为使用setAttribute('style')擦除了您在Grid函数中应用的height和width样式。

反馈

• 您只使用querySelector ，也应该了解getElementById 。
• 您使用var几次，但不要声明y ， x或size
• 您可以定义y和x你for循环使用for(var y=0 ，并for(var x=0

CSS解决方案

假设您希望颜色在mouseout恢复，您可以使用.cube:hover使用CSS达到相同的效果

 .cube { display: inline-block; width: 50px; height: 50px; background-color: red; } .cube:hover { background-color: black; } 

 <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> <div class="cube"></div> 

性能

关于使用querySelector('#container')与getElementById('container') 。 前者必须遍历整个DOM以寻找选择器，后者则可以转到内部ID列表并返回引用。

https://jsperf.com/so53824751

文献资料

https://developer.mozilla.org/zh-CN/docs/Web/Events/mouseover

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByClassName

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById

Answer 4

不需要有数百个鼠标悬停事件监听器。 一个就够了

 var divContainer = document.getElementById('container'), CubeClass = 'cube'; function Grid(z) { var sizePx = Math.floor(700 / z) + 'px'; for (let y = 0; y < z; y++) { for (let x = 0; x < z; x++) { let block = document.createElement('div'); block.style.height = sizePx; block.style.width = sizePx; block.className = CubeClass; divContainer.appendChild(block); }; }; } divContainer.onmouseover = function(e) { if (!e.target.classList.contains( CubeClass )) return; e.target.setAttribute('style', 'background: black'); } divContainer.onmouseout = function(e) // if you need it... { if (!e.target.classList.contains( CubeClass )) return; e.target.removeAttribute('style'); }