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

  });
});