时间戳

首页 > 解决方案 > 使用 .addEventListener 更改框的背景颜色

javascript - 使用 .addEventListener 更改框的背景颜色

问题描述

我正在尝试更改某些框的背景颜色，而指针在 js 中悬停在它上面但没有任何运气。这是js

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

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

这是盒子类的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>

我还在 index.html 中链接了 app.js，但是当我将鼠标悬停在框上时没有任何反应。

标签： javascripthtmlcss

解决方案

注意拼写错误，并遍历元素：

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>

推荐阅读