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

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

从图像中删除指针事件

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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="">

＆＃13;

将弹出式图片添加到选择器

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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="">

＆＃13;

将弹出图片添加到范围

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

这是因为显示的图像覆盖了鼠标输入的元素，然后触发鼠标离开事件，然后在鼠标移动时隐藏弹出窗口。基本上，由于“popup”位于带有mouseenter / mouseleave事件的元素之上，因此它们会不断被触发。

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

Answer 3

尝试更改

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

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

悬停显示闪烁jquery

3 个答案: