使两个不同 div 中的图像站在同一个地方

Question

我正在使用 Wordpress 和 Woocommerce。当用户将鼠标悬停在商店页面的主图像上时，我需要一个可以显示次要产品图像的东西。我发现了一个由 jameskoster 制作的非常好的插件，我已经根据我的需要对其进行了修改。它做了它打算做的事情，但是，我有一个我无法解决的小故障。

在我的实际设置中，辅助 div 位于主 div 下方。当悬停发生时，一切都很好。当悬停消失或当我将鼠标悬停在 li 元素而不是 a 时，会发生这些事情： https://imgur.com/a/mbZGd

错误是，当悬停结束时，次要图像会落在原始 div 下方，显示它并使过渡看起来很糟糕。

我几乎已经过了昨天下午的整个尝试来修复它。我尝试了很多东西，包括 height:0;显示：无； opacity:0，元素位置和其他一些东西，甚至是条件选择器“~”

但是，我无法让它工作。 我需要的解决方案是使两个 div 适合同一个位置。 当我将鼠标悬停在实际的一个时，它消失了，而第二个出现了。

这个想法很简单。你们能帮我实现吗？

Answer 1

我是在帕特里克的帮助下完成的。 “闪烁”的情况是由以下原因引起的：

 height :0;
 or display: none;

我已经实现了 Patrick 反馈中提供的 nth-child(1) e (2) 解决方案，并做了两件最重要的事情：

 position: static;

给第一个孩子。 并且：

position: absolute;

给第二个孩子。 这使得设置 div 的样式并在同一位置完美地显示图像成为可能。然后您必须调整 CSS 以使容器完全适合您的布局。

Answer 2

您需要将第二张图片移动到与第一张图片相同的包装器中。

例如你有：

<div class="wrapper">
[YOUR IMAGE 1]
</div>

<div class="wrapper">
[YOUR IMAGE 2]
</div>

但你想要：

<div class="wrapper">
[YOUR IMAGE 1]
[YOUR IMAGE 2]
</div>

要做到这一点，您可以使用 Jquery。将此添加到您的脚本中

$('.woocommerce-LoopProduct-link .prod-img-wrap:nth-child(1)').append($('.woocommerce-LoopProduct-link .prod-img-wrap:nth-child(2) img') );

如果你不确定如何添加这个脚本，你可以像这样直接把它放到footer.php中

<script>
(function($){
$('.woocommerce-LoopProduct-link .prod-img-wrap:nth-child(1)').append($('.woocommerce-LoopProduct-link .prod-img-wrap:nth-child(2) img') );
})(jQuery);
</script>

https://jsfiddle.net/mwqfL6du/27/