悬停显示闪烁 jquery

Question

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

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

这是因为显示的图片越过你鼠标进入的元素，然后触发了鼠标离开事件，然后在鼠标移动的那一刻隐藏了弹出窗口。基本上，由于 "popup" 位于带有 mouseenter/mouseleave 事件的元素之上，因此它们会不断被触发。

如果您将元素移动到不超过用于弹出窗口的元素上方，则不会出现该问题。如果将 top: 80px 添加到 .popup__image 元素，它会 will work as expected.

Answer 2

这是因为您的悬停事件在跨度上 - 当图像出现时您不再悬停在跨度上，您需要将图像放在跨度中，关闭图像的指针事件或添加悬停选择器的弹出图像

从图像中删除指针事件

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

Answer 3

只需尝试更改

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

它对我有用，而且是一个简单的解决方案。

悬停显示闪烁 jquery

hover display flicker jquery

jquery

html

css

flicker