如何在鼠标悬停时为页面上的所有 div 添加悬停效果？

Question

我有一个 16x16 的小方块网格。我添加了一个永久的“悬停”效果，当我将鼠标放在第一个框上时，它会变成红色。但是，我想为页面上的所有框添加相同的效果。我不知道该怎么做 - 我试图向整个页面添加一个事件侦听器并使用 target.nodeName 和 target.NodeValue，但无济于事。我已经包含了修复框在鼠标悬停时变为红色的工作版本。

var n=16; //take grid column value as you want

const bigContainer = document.querySelector('.bigContainer')

for(var i = 1; i < n; i++) {
    bigContainer.innerHTML+='<div class="row">';

    for(j = 0; j < n; j++) {
        bigContainer.innerHTML+='<div class="smallBox">';
    }
}

const smallBox = document.querySelector('.smallBox');

smallBox.addEventListener('mouseover', () => {
    smallBox.classList.add('permahover');
});

.smallBox {
    border: 1px solid black;
    width: 20px;
    height: 20px;
    display: inline-block;
}

.permahover {
    background: red;
}

h1 {
    text-align: center;
}

.bigContainer {
    text-align: center;
}

<h1>Etch-a-Sketch Assignment - The Odin Project</h1>
<div class="bigContainer">

</div>

Answer 1

您遇到的直接问题是这只是查询，然后向一个元素添加事件侦听器。

const smallBox = document.querySelector('.smallBox');

smallBox.addEventListener('mouseover', () => {
    smallBox.classList.add('permahover');
});

在上述代码部分中，querySelector 仅返回第一个匹配元素。您可能正在这里寻找querySelectorAll，它返回匹配元素的NodeList。

您有两种选择（如果您想进一步重构代码，可能还有其他选择）。事实上，最简单的方法是查询所有单元格并为每个单元格添加事件侦听器。

var n=16; //take grid column value as you want

const bigContainer = document.querySelector('.bigContainer')

for(var i = 1; i < n; i++) {
    bigContainer.innerHTML+='<div class="row">';

    for(j = 0; j < n; j++) {
        bigContainer.innerHTML+='<div class="smallBox">';
    }
}

const smallBoxes = document.querySelectorAll('.smallBox');

[...smallBoxes].forEach(smallBox => {
  smallBox.addEventListener('mouseover', () => {
      smallBox.classList.add('permahover');
  });
})

.smallBox {
    border: 1px solid black;
    width: 20px;
    height: 20px;
    display: inline-block;
}

.permahover {
    background: red;
}

h1 {
    text-align: center;
}

.bigContainer {
    text-align: center;
}

<h1>Etch-a-Sketch Assignment - The Odin Project</h1>
<div class="bigContainer">

</div>

另一种选择是使用您确定的事件委托。这是您可以利用它的方法。注意：这种方法对于像“鼠标悬停”这样的攻击性事件有点棘手，因为您可能会得到误报目标（例如外部容器）。

var n=16; //take grid column value as you want

const bigContainer = document.querySelector('.bigContainer')

for(var i = 1; i < n; i++) {
    bigContainer.innerHTML+='<div class="row">';

    for(j = 0; j < n; j++) {
        bigContainer.innerHTML+='<div class="smallBox">';
    }
}

bigContainer.addEventListener('mouseover', e => {
  var target = e.target

  if (target !== bigContainer) {
    target.classList.add('permahover')
  }
})

.smallBox {
    border: 1px solid black;
    width: 20px;
    height: 20px;
    display: inline-block;
}

.permahover {
    background: red;
}

h1 {
    text-align: center;
}

.bigContainer {
    text-align: center;
}

<h1>Etch-a-Sketch Assignment - The Odin Project</h1>
<div class="bigContainer">

</div>

Answer 2

您需要使用委托事件，因为页面加载时页面上不存在所有小框（您可以在检查器元素中找出只有您的第一个框具有事件侦听器）。

所以你听整个容器（因为它总是在加载的页面上）

bigContainer.addEventListener('mouseover', () => {
    // Code for checking if we hovered a small div & if yes applying the style
});

...然后与event.target（将是悬停的小div）进行比较

if (event.target.matches('.smallBox')) {
    event.target.classList.add('permahover');
}

var n=16; //take grid column value as you want

const bigContainer = document.querySelector('.bigContainer')

for(var i = 1; i < n; i++) {
    bigContainer.innerHTML+='<div class="row">';

    for(j = 0; j < n; j++) {
        bigContainer.innerHTML+='<div class="smallBox">';
    }
}

const smallBox = document.querySelector('.smallBox');

bigContainer.addEventListener('mouseover', () => {
    if (event.target.matches('.smallBox')) {
        event.target.classList.add('permahover');
    }
});

.smallBox {
    border: 1px solid black;
    width: 20px;
    height: 20px;
    display: inline-block;
}

.permahover {
    background: red;
}

h1 {
    text-align: center;
}

.bigContainer {
    text-align: center;
}

<h1>Etch-a-Sketch Assignment - The Odin Project</h1>
<div class="bigContainer">

</div>

Answer 3

您可以使用forEach 方法循环遍历所有框并在每个框上添加 eventListener。 如果他们都有.smallBox 类，你可以这样做：

const smallBoxes = document.querySelectorAll('.smallBox');

smallBoxes.forEach(box => box.addEventListener('mouseover', () => {
    smallBox.classList.add('permahover');
}))

希望对你有帮助！

Answer 4

let smallBoxes = document.querySelectorAll('.smallBox');
[...smallBoxes].forEach(el => {
    el.addEventListener('mouseover', e => e.target.classList.add('permahover'));
});

Answer 5

您应该将事件侦听器设置为您的 DOM，并询问触发元素是否是您的特定类元素之一。因此，您可以使用该类处理每个元素。

var n = 16; //take grid column value as you want

const bigContainer = document.querySelector('.bigContainer')

for (var i = 1; i < n; i++) {
  bigContainer.innerHTML += '<div class="row">';

  for (j = 0; j < n; j++) {
    bigContainer.innerHTML += '<div class="smallBox">';
  }
}

document.addEventListener('mouseover', function(e) {
  if (e.target && e.target.className == 'smallBox') {
        var target = e.target;
        target.classList.add('permahover');
  }
});

工作 js 小提琴：https://jsfiddle.net/nwukf205/

希望我能帮助你:) 有问题就问吧

Answer 6

您是否尝试过 :hover 选择器？不确定您是否要在此处指定任何动态操作，但很容易做一些基本的事情。

https://www.w3schools.com/cssref/sel_hover.asp

a:hover {
   background-color: yellow;
 }

我自己没有尝试过您的示例，但此处已回答了与此类似的问题：

Hover on element and highlight all elements with the same class