JavaScript Mouseover仅在第一个元素上工作

Question

我每次都悬停了一个输入框时，我试图使图标更改颜色。问题在于，它仅在悬停在第一个输入文本框时而不是其他两个时会更改背景。

我试图在没有jQuery的情况下获得这种效果。谢谢您的帮助！

var input = document.querySelector ('input');
var icon = document.querySelector ('img');
input.addEventListener ('mouseover', function hover(){
  icon.style.background = '#D46855';
});
input.addEventListener ('mouseleave', function leave(){
  icon.style.background = '#81D455';
  
});

@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
body{
 background-image :url(https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/b0e53331516629.565449774c2d4.png); 
}
h1{
 font-family: 'Indie Flower', cursive;
  font-size:3em;
  color:#D46855;
  letter-spacing:5px;
}
#container{
  text-align:center;
  margin:10% auto;
  padding-top: 50px;
  border-radius:15%;
  width:80%;
  height:400px;
  position:relative;
  background-color : rgba(84, 193, 212, 0.56);
 box-shadow: 5px 5px 4px 5px rgba(84, 193, 212, 0.56);
}
img{
left: 0;
right: 0;
bottom: 0;
margin: auto;
  height:100px;
  width : 100px;
  position:absolute;
  top: -95%;
  border-radius:30px;
  background:#81D455;
}
input{
  width:200px;
  height:15px;
  font-size:1.2em;
  padding:10px;
  text-align:center;
  display:flex;
  margin:0 auto;
  margin-top:20px;
}

<div id = 'container'>
  <h1>To Do List</h1>
  <img src = "https://www.jamiesale-cartoonist.com/wp-content/uploads/cartoon-business-man-free1.png">
  <form>
    
    <input type = 'text' placeholder = 'item' id = 'list' </input>
    <input type = 'text' placeholder = 'item' id = 'list' </input>
    <input type = 'text' placeholder = 'item' id = 'list' </input>
  </form>
   </div>
</body>

任何建议都将不胜感激（：

Answer 1

querySelector仅返回找到的第一个元素。

当您有多个input元素时，请使用querySelectorAll

var input = document.querySelectorAll('input');

当querySelectorAll返回多个元素（在这种情况下，这是输入的节点列表）时，您必须将事件处理程序连接到循环中。

var inputs = document.querySelectorAll('input');
var icon = document.querySelector('img');
inputs.forEach(function(input) {
  input.addEventListener('mouseover', function hover() {
    icon.style.background = '#D46855';
  });
  input.addEventListener('mouseleave', function leave() {
    icon.style.background = '#81D455';
  });
});