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会触发.content。要解决此问题，请对pointer-events: none;使用<h1>。 Read about pointer-events on MDN

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

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

Answer 2

问题是您正在使用＆＃34; mouseover＆＃34;，每次使用鼠标切换容器时都会触发事件。例如，你可以在这里看到这种愚蠢的行为：

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

在底部。

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

h1{
    pointer-events: none;
}

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

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

Answer 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()

在h1标签上移动时闪烁

3 个答案: