Javascript mouseoverは最初の要素でのみ動作します

Question

入力ボックスを移動するたびにアイコンの色を変更しようとしています。問題は、他の2つではなく、最初の入力テキストボックスをホバリングするときだけ背景を変更することです。

私はjquery.Thanksなしでこの効果を得ようとしていますあなたの助けを事前に感謝！

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

    }); 
});