CODEWITHSUNDEEP
javascripthtmlmouseovermouseout
Tavish Aggarwal
Tavish Aggarwal

Reputation: 1060

Avoid mouseout when overlay is added on image tag

I have a requirement where I have attached mouseOver and mouseOut event to image tag. Also on mouse over I am adding a overlay div on image tag.

So now even my mouse is on image, still mouseOut event is occurring because of overlay added. Below is my code:

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>

As you can see in above code, that mouseout is happening and overlay is flickering, I tried a lot but not able to find out way to stop mouseout even after adding overlay.

NOTE:

  1. I want to add mouseover event to image tag only.
  2. Also, I want to do this in pure JavaScript.

EDIT:

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>

Thanks for the help! I have an updated code where again its flickering on mouse over reason is I am appending another div in wrapper div.

Please let me know possible solution. I am trying to control event object but not able to do it exactly.

Upvotes: 1

Views: 363

Answers (2)

Anton Krylov
Anton Krylov

Reputation: 449

I think u should track when your mouse out from the wrapper. Cause when u add wrapper all mouse move would be tracked as move out from image, cause wrapper overlaps image. Like this

   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>

Upvotes: 2

Joschi
Joschi

Reputation: 2974

The "wrapper" is above the image and so the mouseout will occur right after insertion. Add the mouseout handler to the wrapper, not to the 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>

Upvotes: 1

Related Questions