在图像标签上添加叠加层时避免鼠标悬停

Question

我有一个要求，我将 mouseOver 和 mouseOut 事件附加到图像标签。同样在鼠标悬停时，我在图像标签上添加了一个覆盖 div。

所以现在即使我的鼠标在图像上，由于添加了覆盖，仍然会发生 mouseOut 事件。以下是我的代码：

document.getElementsByTagName('img')[0].addEventListener('mouseover', function(event){
let Wrapper = document.createElement('div');

    Wrapper.classList.add('Wrapper');
    Wrapper.id = 'wrapper';
    
    let parentElement = event.currentTarget.parentElement;
    let elementExists = document.getElementById('wrapper');

    if (!elementExists) {
        parentElement.appendChild(Wrapper);
    }
});

document.getElementsByTagName('img')[0].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;
    }

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

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

正如您在上面的代码中看到的那样，mouseout 正在发生并且覆盖在闪烁，我尝试了很多但即使在添加覆盖之后也无法找到停止 mouseout 的方法。

注意：

1. 我只想将鼠标悬停事件添加到图像标签。
2. 另外，我想在纯 JavaScript 中执行此操作。

编辑：

document.getElementsByTagName('img')[0].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">
<img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" />
</div>

感谢您的帮助！我有一个更新的代码，它在鼠标悬停时再次闪烁的原因是我在包装器 div 中附加了另一个 div。

请告诉我可能的解决方案。我正在尝试控制事件对象，但不能完全做到。

Answer 1

我认为你应该跟踪你的鼠标何时从包装中出来。因为当您添加包装器时，所有鼠标移动都将被跟踪为从图像中移出，导致包装器与图像重叠。像这样

   document.getElementsByTagName('img')[0].addEventListener('mouseenter', 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('mouseleave', 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">
<img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" />
</div>

Answer 2

“包装器”位于图像上方，因此鼠标移出将在插入后立即发生。将 mouseout 处理程序添加到包装器，而不是 img。

document.getElementsByTagName('img')[0].addEventListener('mouseover', function(event){
    
    let elementExists = document.getElementById('wrapper');
    if (!elementExists) {
      let Wrapper = document.createElement('div');
      let parentElement = event.currentTarget.parentElement;
      Wrapper.classList.add('Wrapper');
      Wrapper.id = 'wrapper';
      parentElement.appendChild(Wrapper);
    
      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;
    }

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

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