替换图像时文本闪烁（css和jquery）答案

【问题标题】：Text flickers when replacing an image (css and jquery)替换图像时文本闪烁（css和jquery）
【发布时间】：2017-03-24 16:54:22
【问题描述】：

将鼠标悬停在图像上时，文本在图像上变得可见的过渡在我将图像和文本放入一个 div 之前是平滑的。我将图像和文本放在一个 div 中，以便我可以将文本放置在图像的顶部。过渡现在不稳定——你知道我该如何解决这个问题吗？谢谢。

$(document).ready(function() {

  $("img").hover(function() {

      $("img").stop().animate({
        "opacity": "0"
      }, "slow");
      $(".text").css("visibility", "visible");
    },
    function() {
      $("img").stop().animate({
        "opacity": "1"
      }, "slow");
      $(".text").css("visibility", "hidden");

    });

});

#image {
  display: block;
  margin: 0 auto;
  height: 35%;
  width: 35%;
  padding-left: 5%;
  overflow: hidden;
}

#imageblock {
  position: relative;
  overflow: hidden;
}

.text {
  color: #000000;
  text-align: center;
  font-family: "Raleway";
  font-size: 90%;
  visibility: hidden;
  position: absolute;
  padding: 3%;
  width: 100%;
  bottom: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imageblock">
  <img id="image" src="http://2016.igem.org/wiki/images/8/81/T--Sydney_Australia--Peek_Banner.png">
  <div class="text">
    <h5>NBB4 ethylene</h5>
  </div>
</div>

【问题讨论】：

不是代码截图，能不能创建一个sn-p或者JSFiddle？
或者至少将 HTML 粘贴到问题中以便我们可以复制。
开始使用 CSS 过渡。
在我的 Firefox 上，如果您将鼠标悬停在文本上，它只会搞砸，这是意料之中的。当您将鼠标悬停在文本上时，您并没有将图片悬停。尝试为 text 和 img 注册事件。看到 javascript 冒泡
能否请您查看我的编辑建议？等了这么久

标签： javascript jquery html css

【解决方案1】：

将悬停事件绑定到#imageblock 而不是图像：

$(document).ready(function() {
  $("#imageblock").hover(function() {
    console.log("enter");
    $("img").stop().animate({"opacity": "0"}, "slow");
    $(".text").css("visibility", "visible");
  }, function() {
    console.log("leave");
    $("img").stop().animate({"opacity": "1"}, "slow");
    $(".text").css("visibility", "hidden");
  });
});

#image {
  display: block;
  margin: 0 auto;
  height: 35%;
  width: 35%;
  padding-left: 5%;
  overflow: hidden;
}

#imageblock {
  position: relative;
  overflow: hidden;
}

.text {
  color: #000000;
  text-align: center;
  font-family: "Raleway";
  font-size: 90%;
  visibility: hidden;
  position: absolute;
  padding: 3%;
  width: 100%;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imageblock">
  <img id="image" src="http://2016.igem.org/wiki/images/8/81/T--Sydney_Australia--Peek_Banner.png">
  <div class="text">
    <h5>NBB4 ethylene</h5>
  </div>
</div>

那么发生了什么？您在图像上绑定了悬停事件 - 并且 - 您有一个不可见的文本块覆盖了图像的一部分。当您将鼠标悬停在中间某处的图像上时，会触发悬停事件，使文本可见。现在文本覆盖了图像，使图像不再悬停，触发第二个事件处理程序，使文本不可见。图像现在再次悬停，并且您有闪烁！请注意，如果您将鼠标悬停在图像边缘（即未被文本覆盖的区域）周围，则不会出现闪烁。

【讨论】：