jquery - 悬停显示闪烁jquery

Question

有人可以解释一下当您使用 mouseenter 并在元素顶部显示元素时闪烁是什么吗？

https://jsfiddle.net/8w2kxLo5

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

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

您有什么建议，因为我正在尝试尽可能少地更改代码。

在考虑@Pete 的评论后。将 removeClass 添加到弹出的图像是一个简单的修复方法，但是有更好的方法吗？

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

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

Answer 1

这是因为您的悬停事件在 span 上 - 当图像出现时您不再悬停在 span 中，您需要将图像放在 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;
  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="">

将弹出图像添加到选择器

$('.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="">

添加弹出图像到 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>