在h1标签上移动时闪烁

Question

我有以下代码,显示悬停图像时的一些文本.但是当光标在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>

Answer 1

原因是当鼠标悬停时<h1>,mouseout会触发a .content.为了解决这个问题,使用pointer-events: none;了<h1>.阅读MDN上的指针事件.

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

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

Answer 2

问题是你正在使用"鼠标悬停",每次用鼠标切换容器时都会触发一个事件.例如,你可以在这里看到这种愚蠢的行为:

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

在底部.

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

h1{
    pointer-events: none;
}

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

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