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

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')擦除了{{1}中应用的height和width样式}功能。

反馈

• 您仅使用Grid，还应该了解querySelector。
• 您多次使用getElementById，但不要声明var，y或x
• 您可以使用size和y在x循环中定义for和for(var y=0

CSS解决方案

假设您希望颜色在for(var x=0上还原，则可以使用mouseout的CSS达到相同的效果

.cube:hover

.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')的旁注。前者必须遍历整个DOM以寻找选择器，后者只需进入内部ID列表并返回引用即可。

https://jsperf.com/so53824751

文档

https://developer.mozilla.org/en-US/docs/Web/Events/mouseover

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

https://developer.mozilla.org/en-US/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');
}