hover display flicker jquery

Question

Could someone please explain what the flicker is when you use mouseenter and show an element over the top of the element?

https://jsfiddle.net/8w2kxLo5

$('.popup').mouseenter(function() {
  $('.popup__image').addClass('showme');
});

$('.popup').mouseleave(function() {
  $('.popup__image').removeClass('showme');
});

What advise do you have, as I'm trying to change the code as little as possible.

After thinking about @Pete's comment. Adding the removeClass to the popped up image is a simple fix, but is there a better way?

$('.popup').mouseenter(function() {
  $('.popup__image').addClass('showme');
});

$('.popup__image').mouseleave(function() {
  $('.popup__image').removeClass('showme');
}); 

Answer 1

Just try changing the

    .popup__image.showme {
  display: block;
  pointer-events:none
}

it worked for me, and its a simple solution.

Answer 2

It's because your hover event is on the span - when the image comes up you are no longer hovering the span, you either need to put the image in the span, turn off the pointer events for the image or add the popup image to the hover selector

Remove pointer events from image

$('.popup').mouseenter(function() {
  $('.popup__image').addClass('showme');
});

$('.popup').mouseleave(function() {
  $('.popup__image').removeClass('showme');
});

body {
  font-family: arial;
  font-size: 20px;
}

.popup {
  color: red;
}

.popup__image {
  position: fixed;
  top: 0px;
  left: 0px;
  display: none;
  pointer-events:none;
}

.popup__image.showme {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
  String of text here, here. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  <br>
  <span class="popup">popup image</span> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
  but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
  including versions of Lorem Ipsum
</div>

<img class="popup__image" src="http://placehold.it/350x150" alt="">

Add popup image to selector

$('.popup,.popup__image').mouseenter(function() {
  $('.popup__image').addClass('showme');
});

$('.popup,.popup__image').mouseleave(function() {
  $('.popup__image').removeClass('showme');
});

body {
  font-family: arial;
  font-size: 20px;
}

.popup {
  color: red;
}

.popup__image {
  position: fixed;
  top: 0px;
  left: 0px;
  display: none;
}

.popup__image.showme {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
  String of text here, here. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  <br>
  <span class="popup">popup image</span> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
  but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
  including versions of Lorem Ipsum
</div>

<img class="popup__image" src="http://placehold.it/350x150" alt="">

Add popup image to span

$('.popup').mouseenter(function() {
  $('.popup__image').addClass('showme');
});

$('.popup').mouseleave(function() {
  $('.popup__image').removeClass('showme');
});

body {
  font-family: arial;
  font-size: 20px;
}

.popup {
  color: red;
}

.popup__image {
  position: fixed;
  top: 0px;
  left: 0px;
  display: none;
}

.popup__image.showme {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
  String of text here, here. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  <br>
  <span class="popup">popup image<img class="popup__image" src="http://placehold.it/350x150" alt=""></span> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
  but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
  including versions of Lorem Ipsum
</div>

Answer 3

This is because the shown image goes over the element that you mouse entered, which then trigger the mouse leave event and then hides the popup the moment the mouse moves. Basically since the "popup" is on top of the element with the mouseenter/mouseleave events they are constantly getting triggered.

If you move the element to not be over the element used for the popup it will not have that problem. If you add top: 80px to the .popup__image element it will work as expected.