在 h1 标签上移动时闪烁答案

【问题标题】：Blinking when moving over h1 tag在 h1 标签上移动时闪烁
【发布时间】：2015-06-23 23:27:44
【问题描述】：

我有以下代码在悬停图像时显示一些文本。但是当光标在 h1 标签上移动时会出现一些问题，当时它正在闪烁。为什么会这样？

jQuery(function($) {
  $('.content1').mouseover(function() {
    $('.content').show();
  });
  $('.content').mouseout(function() {
    $('.content').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <img class="content1" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/2000px-HTML5_logo_and_wordmark.svg.png" style="width:100%;position:relative">
  <div class="content" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; text-align: center; color: white; display: none; background: rgba(0, 0, 0, 0.901961);">
    <h1 style="color:white">hiiiiiiiiiiiiiiiiiii</h1>
  </div>

【问题讨论】：

...它发生在 Chrome 中，只是为了添加...（firefox 可以）
它是怎么闪烁的？哪个浏览器？在 ff 和 chrome 中很好
顺便说一句，我可以看到它。使用铬。虽然很微妙。
@nevermind 我也在使用 chrome..
mouseenter/mouseleave 问题？可能是由于h1 上的利润或其他原因？

标签： javascript jquery html

【解决方案1】：

这样做的原因是当鼠标在<h1>上时，mouseout会在.content上触发。要解决此问题，请将pointer-events: none; 用于<h1>。 Read about pointer-events on MDN.

<h1 style="color:white; pointer-events: none;">hiiiiiiiiiiiiiiiiiii</h1>

演示：http://jsfiddle.net/j3zqgsou/

【讨论】：

@Pranav C Balan：注意：pointer-events: none 在旧版浏览器上不可用。

【解决方案2】：

问题是您使用的是“鼠标悬停”，每次您用鼠标切换容器时都会触发一个事件。例如，您可以在这里看到这种愚蠢的行为：

https://api.jquery.com/mouseover/

在底部。

这可以通过使用简单的 CSS 行来证明：

h1{
    pointer-events: none;
}

这使得 H1 标签对鼠标完全透明。

小提琴！ https://jsfiddle.net/yy5afj0o/

【讨论】：

【解决方案3】：

您可以使用以下 CSS 来防止它：

h1 {
    pointer-events: none;
}

我还尝试使用mouseenter 代替mouseover 和mouseleave 代替mouseout。

这对我有用：

jQuery(function($) {
  $('.content1').mouseenter(function() {
    $('.content').show();
  });
  $('.content').mouseleave(function() {
    $('.content').hide();
  });
});

小提琴：http://jsfiddle.net/qvuj48yr/1/

信息：Jquery mouseenter() vs mouseover()

【讨论】：