如何使立方体在鼠标移动时变为黑色

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 = document.querySelectorAll('.cube');，使s成为类cube的所有元素的数组。

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

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

请注意在处理程序中使用了this。在处理程序代码中，this指的是触发事件的对象(在您的案例中是鼠标悬停在上面的多维数据集(。

Answer 3

无需拥有数百个鼠标悬停事件侦听器。只要一个就足够了

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');
}

Answer 4

您想要的事件名称是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，而不是从changeBlockColor内部调用createGrid，从逻辑上讲，这更有意义
• 我创建了一个名为active的CSS类来处理颜色的更改，因为使用setAttribute('style')会擦除您在Grid函数中应用的height和width样式

反馈

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

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/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