Question

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

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

错误是，一旦悬停结束，次要图像就会低于原始div，显示它并使转换看起来很糟糕。

我几乎整个昨天下午试图修复它。我尝试了很多东西，包括身高：0;显示：无;不透明度：0，元素位置和其他几个东西，甚至是条件选择器＆＃34;〜＆＃34;

但是，我无法使其发挥作用。我需要的解决方案是使两个div适合相同的位置。当我悬停实际的那个时，它会消失，第二个出现。

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

Answer 1

我是在Patrick的协助下完成的。 “闪烁”的情况是由以下原因引起的：

 height :0;
 or display: none;

我已经实现了Patrick的反馈中提供的第n个孩子（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/

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

2 个答案: