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>

正如您在上面的代码中看到的那样，鼠标移动正在发生，叠加层正在闪烁，我尝试了很多，但即使在添加叠加后也无法找到停止鼠标移除的方法。

注意：

我想将鼠标悬停事件添加到图片标记。
另外，我想用纯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>

在图像标记上添加叠加时避免鼠标移除

2 个答案: