悬停时立即添加到购物车按钮 appears/disappears

Question

我对 Shopify 上的特定产品系列有疑问。

在这些页面上：http://www.cooldownjuice.com/collections/menu#cc and http://www.cooldownjuice.com/collections/juice-cleanses

在下面的产品上，"Cooldown Cleanses," 悬停时添加到购物车按钮出现并在悬停时立即消失。

商店中的任何其他商品都不会发生这种情况。

如有任何帮助，我们将不胜感激！

Answer 1

这是因为悬停时，您的 form 向下发送 165 像素。

.product_listing_main .product_img form {
    top: 165px;
}

此值是绝对值，当图像较短时，它会进入图像下方并溢出您的 div，因此它是不可见的。更改为此应始终在悬停时将按钮垂直居中：

.product_listing_main .product_img form {
    top: calc(50% - 21px);
}

（21px 是此处按钮高度的一半）

Answer 2

如果您可以向 CSS 文件添加规则，请尝试为该块编辑 CSS：

.product_listing_main .product_img form {
   top: 50%;
}

或者如果您无法编辑 CSS。尝试在此块中替换您的产品图像。新图片的高度应至少为 330px。