javascript - 将鼠标悬停在图像上以在 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>

每次我将鼠标悬停在第一张图片上时，代码都能正常运行。但是当我将鼠标悬停在第二张图片上时，它只会在第一张图片上添加叠加层。(它应该在第二张图片上添加叠加层)我尝试调试代码并且 let parentElement = event.currentTarget.parentElement; 正在显示仅一个 href。

注意:我之所以知道它是因为我将 position: absolute 赋予了 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，因为它触发了 mouseout 事件并使其闪烁。

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>