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。

注意：我开始知道它，因为我给位置：绝对的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事件并使其闪烁。

＆＃13;

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();
        }
      });
    }
});
}

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

将鼠标悬停在图片上以在JavaScript中添加叠加层

1 个答案: