用.addEventListener更改盒的背景色

Question

当指针在js中悬停时，我试图使某些框的背景色发生变化，但没有任何运气。这是js

var box = document.getElementByClassName("box");

box.addEventListener("mouseover", function(){
  this.style.backgroundColor = "#aad9f1";
});
box.addEventListener("mouseout", function(){
  this.style.backgroundColor = "#9Ac9e1";
});

以下是box类的css

.box{
  height: 25px;
  width: 14.25%;
  overflow-x: hidden;
  border: 0px solid black;
  background-color: #9Ac9e1;
  float: left;
  font-size: 130%;
}

和html文件中的框。

    <div class="menubar_box">
      <div class="box"><a href="index.html">Home</a></div>
      <div class="box"><a href="pages/microphones.html">Microphones</a></div>
      <div class="box"><a href="pages/preamps.html">Preamps</a></div>
      <div class="box"><a href="pages/compressors.html">Compressors</a></div>
      <div class="box"><a href="pages/equalizers.html">Equalizers</a></div>
      <div class="box"><a href="pages/instruments.html">Instruments</a></div>
      <div class="box"><a href="pages/miscellaneous.html">Miscellaneous</a></div>
    </div>

我还将app.js链接到index.html中，但是当我在盒子上鼠标移动时，什么都不会发生。

Answer 1

注意打字，并遍历元素：

​

var box = document.getElementsByClassName("box");

for (let i = 0; i < box.length; i++) {
  box[i].addEventListener("mouseover", function(){
    this.style.backgroundColor = "#aad9f1";
  });
  box[i].addEventListener("mouseout", function(){
    this.style.backgroundColor = "#9Ac9e1";
  });
} 

.box{
  height: 25px;
  width: 14.25%;
  overflow-x: hidden;
  border: 0px solid black;
  background-color: #9Ac9e1;
  float: left;
  font-size: 130%;
}

    <div class="menubar_box">
      <div class="box"><a href="index.html">Home</a></div>
      <div class="box"><a href="pages/microphones.html">Microphones</a></div>
      <div class="box"><a href="pages/preamps.html">Preamps</a></div>
      <div class="box"><a href="pages/compressors.html">Compressors</a></div>
      <div class="box"><a href="pages/equalizers.html">Equalizers</a></div>
      <div class="box"><a href="pages/instruments.html">Instruments</a></div>
      <div class="box"><a href="pages/miscellaneous.html">Miscellaneous</a></div>
    </div>

​

但是，您可以做的是将hover规则放在CSS中：

​

.box{
  height: 25px;
  width: 14.25%;
  overflow-x: hidden;
  border: 0px solid black;
  background-color: #9Ac9e1;
  float: left;
  font-size: 130%;
  transition: transform .2s; /* Animation */
}

.box:hover {
  background-color: #aad9f1;
  transform: scale(1.5);
}

    <div class="menubar_box">
      <div class="box"><a href="index.html">Home</a></div>
      <div class="box"><a href="pages/microphones.html">Microphones</a></div>
      <div class="box"><a href="pages/preamps.html">Preamps</a></div>
      <div class="box"><a href="pages/compressors.html">Compressors</a></div>
      <div class="box"><a href="pages/equalizers.html">Equalizers</a></div>
      <div class="box"><a href="pages/instruments.html">Instruments</a></div>
      <div class="box"><a href="pages/miscellaneous.html">Miscellaneous</a></div>
    </div>

​

Answer 2

一些问题..。您使用的getElementByClassName应该是=> getElementsByClassName，注意Elements的复数用法--第二，您有一个要查询的元素列表，因此您需要引用选择器的键。在下面的示例中，我使用querySelectorAll()创建了一个nodeList，然后将代码包装在一个forEach循环中，遍历nodelist并找到所选元素的值。

注意： getElementsByClassName返回HTML collection__，因此forEach不会使用它，正如另一个用户在回答中指出的那样，您可以使用for循环并将迭代器或计数器的值作为关键指示符进行迭代。for(let i = 0; i < box.length; i++)然后在循环中使用迭代器=> i__找到集合的元素。

​

let box = document.querySelectorAll(".box");
box.forEach((value, index) => {
  box[index].addEventListener("mouseover", function() {
    value.style.backgroundColor = "#aad9f1";
    value.style.cssText = 'transform: scale(1.2);'
  });
  box[index].addEventListener("mouseout", function() {
    value.style.backgroundColor = "#9Ac9e1";
    value.style.cssText = 'transform: scale(1);'
  });
})

.menubar_box {
  display: flex;
}

.box {
  width: 100%;
  height: 25px;
  border: 0px solid black;
  background-color: #9Ac9e1;
  font-size: 130%;
  display: flex;
  align-items:center; 
  justify-content:center;
  padding: 2px 10px;
}

<div class="menubar_box">
  <div class="box"><a href="index.html">Home</a></div>
  <div class="box"><a href="pages/microphones.html">Microphones</a></div>
  <div class="box"><a href="pages/preamps.html">Preamps</a></div>
  <div class="box"><a href="pages/compressors.html">Compressors</a></div>
  <div class="box"><a href="pages/equalizers.html">Equalizers</a></div>
  <div class="box"><a href="pages/instruments.html">Instruments</a></div>
  <div class="box"><a href="pages/miscellaneous.html">Miscellaneous</a></div>
</div>

​

Answer 3

您应该将document.getElementByClassName("box") (其中有一个错误)替换为document.querySelectorAll(".box")。如果需要选择具有给定类、id、标记等元素，则此方法更可重用。

使用此方法时，boxes将是与选择器匹配的所有元素的数组。所以你必须把你的逻辑运用到每个人身上。forEach方法对此最好。

下面是一个有用的例子：

​

var boxes = document.querySelectorAll(".box");

boxes.forEach((box) => {
  box.addEventListener("mouseover", function(){
    this.style.backgroundColor = "#aad9f1";
  });
  
  box.addEventListener("mouseout", function(){
    this.style.backgroundColor = "#9Ac9e1";
  });
})

.box{
     height: 25px;
     width: 14.25%;
     overflow-x: hidden;
     border: 0px solid black;
     background-color: #9Ac9e1;
     float: left;
     font-size: 130%;
 }

<div class="menubar_box">
    <div class="box"><a href="index.html">Home</a></div>
        <div class="box"><a href="pages/microphones.html">Microphones</a></div>
    <div class="box"><a href="pages/preamps.html">Preamps</a></div>
    <div class="box"><a href="pages/compressors.html">Compressors</a></div>
    <div class="box"><a href="pages/equalizers.html">Equalizers</a></div>
    <div class="box"><a href="pages/instruments.html">Instruments</a></div>
    <div class="box"><a href="pages/miscellaneous.html">Miscellaneous</a></div>
 </div>

​