Question

好的所以我有一张图像可以在悬停时交叉淡入到另一张图像。我还有描述性文本交叉淡入到与第二个图像对应的另一个文本。我现在所拥有的，最糟糕的是，我唯一的问题就是它消失了（CSS：显示 - 无 - 添加，以便第二张图像不会弹出第一张图像...我和＃39;我试图摆弄各个位置，但到目前为止：没有骰子）

此外，它周围似乎有点触发功能（移动你的指针）......它几乎就像发生某种包裹一样？

总的来说，我已经尝试过显示和隐藏功能（而不是fadeIn / fadeOut），这并没有给我任何问题......但是，它并没有给我带来帮助期望的效果。

＆＃13;

$(".top").mouseenter(function() {
  $(".bottom").fadeIn();
  $(".top").hide();
});

$(".bottom").mouseleave(function() {
  $(".top").fadeIn();
  $(".bottom").hide();
});

＆＃13;

.bottom {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="top" src="https://upload.wikimedia.org/wikipedia/commons/a/ac/200px-Fleur-de-Tournesol.PNG">
<img class="bottom" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Orange_-_replace_this_image_female.svg/200px-Orange_-_replace_this_image_female.svg.png">
<p class="top">Top Text</p>
<p class="bottom">Bottom Text</p>

＆＃13;

Answer 1

你几乎拥有它。使转换变得不可思议的第一件事是您拨打hide()而不是fadeOut()。你可能这样做是为了避免像你提到的那样暂时将图像堆叠在一起。在这种情况下，使用具有绝对定位的fadeOut()是可行的方法。请注意，我重新构建了一些标记以使其正常工作：

$(".top").mouseenter(function() {
  $(".bottom").fadeIn();
  $(".top").fadeOut();
});

$(".bottom").mouseleave(function() {
  $(".top").fadeIn();
  $(".bottom").fadeOut();
});

.top, .bottom {
  position: absolute;
  top: 0;
  left: 0;
}

.bottom {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="top">
  <img src="https://upload.wikimedia.org/wikipedia/commons/a/ac/200px-Fleur-de-Tournesol.PNG">
  <p>Top Text</p>
</div>
<div class="bottom">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Orange_-_replace_this_image_female.svg/200px-Orange_-_replace_this_image_female.svg.png">
  <p>Bottom Text</p>
</div>

使用jQuery在悬停上的文本交叉淡入淡出图像

1 个答案: