Javascript 在h1标签上移动时闪烁

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

jQuery（函数（$）{
$（'.content1'）.mouseover（函数（）{
$（'.content'）.show（）；
});
$（'.content'）.mouseout（函数（）{
$（'.content'）.hide（）；
});
});

你好
原因是当鼠标位于
上方时，
.content
上会触发
鼠标输出。要解决此问题，请使用
指针事件：无用于

HIIIIIIIII

演示：
这样做的原因是，当鼠标位于
上方时，会在
.content
上触发
鼠标输出。要解决此问题，请使用
指针事件：无用于

HIIIIIIIII

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


在底部

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

h1{
    pointer-events: none;
}

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

小提琴！
问题在于您使用的是“mouseover”，每次您用鼠标切换容器时，它都会触发一个事件。例如，您可以在此处看到这种愚蠢的行为：


在底部

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

h1{
    pointer-events: none;
}

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

小提琴！
您可以使用以下CSS来防止它：

h1 {
    pointer-events: none;
}

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

这对我很有用：

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

小提琴：

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

h1 {
    pointer-events: none;
}

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

这对我很有用：

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

小提琴：

信息：
…这发生在Chrome中，只是为了添加。。。（firefox还可以）它是如何闪烁的？哪个浏览器？在ff和Chrome中，我可以看到它。顺便说一句，使用Chrome。虽然这很微妙。@别让我也使用chrome..鼠标器/鼠标器有问题吗？可能是因为页边空白或是h1上的某些东西，而这发生在Chrome上，只是为了增加。。。（firefox还可以）它是如何闪烁的？哪个浏览器？在ff和Chrome中，我可以看到它。顺便说一句，使用Chrome。虽然这很微妙。@别让我也使用chrome..鼠标器/鼠标器有问题吗？可能是由于
h1
上的边距或其他原因？@Pranav C Balan:注意：
指针事件：无
在旧版浏览器上不可用。@Pranav C Balan:注意：
指针事件：无
在旧版浏览器上不可用。