JavaScriptにオーバーレイを追加する画像にカーソルを合わせる

Question

divラッパーに複数の画像がある場合。ユーザーが画像にカーソルを合わせたときに画像にオーバーレイを追加したい私は以下に示すコードを使用しようとしています。

for(var i=0; i<document.getElementsByTagName('img').length; i++) { 
 
document.getElementsByTagName('img')[i].addEventListener('mouseover', function(event){ 
 
    
 
    let elementExists = document.getElementById('wrapper'); 
 
    let Center = document.createElement('div'); 
 
    let Text = document.createElement('div'); 
 
     
 
    if (!elementExists) { 
 
     let Wrapper = document.createElement('div'); 
 
     let parentElement = event.currentTarget.parentElement; 
 
     Wrapper.classList.add('Wrapper'); 
 
     Wrapper.id = 'wrapper'; 
 
     
 
    Center.classList.add('Center'); 
 
    Text.innerHTML = "Sample text"; 
 
     
 
    parentElement.appendChild(Wrapper); 
 
    Wrapper.appendChild(Center); 
 
    Center.appendChild(Text); 
 
    
 
     Wrapper.addEventListener('mouseout', function(event){ 
 
     if (document.getElementById('wrapper')) { 
 
      document.getElementById('wrapper').remove(); 
 
     } 
 
     }); 
 
    } 
 
}); 
 
}

.col-md-6 { 
 
     width: 375px; 
 
     height: 211px; 
 
     margin: 20px; 
 
     position: relative; 
 
    } 
 
    
 
     .Wrapper { 
 
     display: table; 
 
     position: absolute; 
 
     background-color: rgba(0, 0, 0, 0.5); 
 
     height: 100% !important; 
 
     width: 100%; 
 
     text-align: center; 
 
     z-index: 1000; 
 
     font-family: arial; 
 
     color: #fff; 
 
     top: 0; 
 
    } 
 

 
    .Center { 
 
     display: table-cell; 
 
     vertical-align: middle; 
 
    }

<div class="col-md-6"> 
 
<a href="#"> 
 
<img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" /> 
 
</a> 
 
<a href="#"> 
 
<img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" /> 
 
</a> 
 
</div>

私は最初の画像の上にカーソルを移動するたびに、コードがうまく動作します。しかし、2番目の画像にマウスを置くと、1番目の画像のみにオーバーレイが追加されます（2番目の画像にオーバーレイが追加されるはずです）。コードをデバッグしようとしました。let parentElement = event.currentTarget.parentElement;はhrefのみを表示しています。

注：私はWrapperに絶対的な位置を与えているので、私はそのことを知りました。私はJavaScriptファイルを変更したいだけで、最大でCSSを変更したいだけです。 コードでエラーが見つかった場合はお知らせください。

Answer 1

これは単にCSSの問題です。ちょうどあなたが現在持っているものにこれを追加します。

a { 
    position: relative; 
    display: inline-block; 
} 

.Wrapper { 
    display: inline-block; 
    left: 0; 
} 

.Center { 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    text-align: center; 
    height: 100%; 
} 

をまた、私は最終的Textのdivを削除し、それがマウスアウトイベントをトリガし、それがちらつく作ったとして、Center DIVにそのテキストを追加しました。

for(var i=0; i<document.getElementsByTagName('img').length; i++) { 
 
document.getElementsByTagName('img')[i].addEventListener('mouseover', function(event){ 
 
    
 
    let elementExists = document.getElementById('wrapper'); 
 
    let Center = document.createElement('div'); 
 
     
 
    if (!elementExists) { 
 
     let Wrapper = document.createElement('div'); 
 
     let parentElement = event.currentTarget.parentElement; 
 
     Wrapper.classList.add('Wrapper'); 
 
     Wrapper.id = 'wrapper'; 
 
     
 
    Center.classList.add('Center'); 
 
    Center.innerHTML = "Sample text"; 
 
     
 
    parentElement.appendChild(Wrapper); 
 
    Wrapper.appendChild(Center); 
 
    
 
     Wrapper.addEventListener('mouseout', function(event){ 
 
     if (document.getElementById('wrapper')) { 
 
      document.getElementById('wrapper').remove(); 
 
     } 
 
     }); 
 
    } 
 
}); 
 
}

.col-md-6 { 
 
    width: 375px; 
 
    height: 211px; 
 
    margin: 20px; 
 
    position: relative; 
 
} 
 

 
a { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 

 
.Wrapper { 
 
    display: inline-block; 
 
    left: 0; 
 
    position: absolute; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    height: 100% !important; 
 
    width: 100%; 
 
    text-align: center; 
 
    z-index: 1000; 
 
    font-family: arial; 
 
    color: #fff; 
 
    top: 0; 
 
} 
 

 
.Center { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    text-align: center; 
 
    height: 100%; 
 
}

<div class="col-md-6"> 
 
<a href="#"> 
 
<img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" /> 
 
</a> 
 
<a href="#"> 
 
<img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" /> 
 
</a> 
 
</div>