我想在 Woocommerce wordpress 中更改 Hover 上的产品图片答案

【问题标题】：I want to change Product Image on Hover in Woocommerce wordpress我想在 Woocommerce wordpress 中更改 Hover 上的产品图片
【发布时间】：2020-08-06 21:10:21
【问题描述】：

我正在尝试在 wordpress 的 woocommerce 中悬停时更改我的产品图片！！！我尝试了一些我看到的插件，例如 Woocommerce Product Image Flipper 和 Magni Image Flip for Wocommerce，但由于某种原因它们无法正常工作，我尝试了您在此处建议的解决方案类似的问题。

那么你是否知道另一个免费的插件我不在乎或者你知道也许有 CSS 的其他解决方案也许我不知道

我正在使用

Wordpress 版本：5.3.2
Wordpress 主题：Flatsome
Woocommerce 版本：3.9.2

谢谢你的帮助，对不起我的英语:)

【问题讨论】：

标签： css wordpress woocommerce hover

【解决方案1】：

好的@st3ph3n92 它对我有用！我只是为每天在线的 10-20 种产品编写自定义 css，所以现在我很好！现在将来我希望有插件来完成这项工作^^

再次感谢您的帮助@st3ph3n92

【讨论】：

【解决方案2】：

@N。 Mar，是的，我使用的自定义 URL 仅作为示例。使用background-image: url("img2")，如果 img2 与您的 CSS 文件位于同一个文件夹，它将选择它。但是，如果您的图片保存在单独的文件夹中，例如“images”，则 CSS 可能为 background-image: url("images/img2")。

这里有一个关于文件夹路径的 StackOverflow 帖子，可能非常有用：What does "./" (dot slash) refer to in terms of an HTML file path location?

因为您使用的是 WooCommerce，所以我想您的图像存储方式会有所不同。这篇文章可能会对此有所了解：https://enviragallery.com/where-does-wordpress-store-uploaded-images/

如果您希望在 Wordpress 上自动执行此操作，则需要使用 PHP。问题是您不能在 CSS 中使用 PHP。相反，您需要将样式添加到内联或主题 html 的头部（而不是单独的样式表），然后使用 PHP 来引用图像。这有点棘手。这里还有另一个 Stackoverflow 帖子：CSS background images in WordPress

【讨论】：

【解决方案3】：

如果您可以访问 CSS，您可以尝试将图像设置为其所在 div 的背景。然后您可以使用 :hover 选择器设置新的背景图像。

你可以在 CodePen 上看到这个：https://codepen.io/St3ph3n92/pen/BaopGQx

或者运行这个 sn-p:

.image-holder {
  height: 300px;
  width: 300px;
  border: 3px solid black;
  margin: 0 auto;
  background-image: url("https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
  background-size: contain;
}

.image-holder:hover {
  background-image: url("https://images.unsplash.com/photo-1514218953589-2d7d37efd2dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60")
}

&lt;div class="image-holder"&gt;&lt;div&gt;

我希望这会有所帮助。

【讨论】：

【解决方案4】：

感谢 St3ph3n92 的回答那么我可以用这样的东西改变这段代码吗？？？

.product-image {
  height: 770px;
  width: 1155px;
  border: none;
  margin: 0 auto;
  background-image: url("img1");
  background-size: contain;
}

.product-image:hover {
  background-image: url("img2")
}

&lt;div class="product-image"&gt;&lt;div&gt;

我的意思是我想要更自动化的东西，因为我有 700 多种产品，所以我不能为每个产品插入自定义 URL！我需要一个代码，所以将我的主要产品图像更改悬停在产品库中的第二个图像上

再次感谢您的回答！！！

【讨论】：

【解决方案5】：

我在一些与您的配置相同的网站上遇到了同样的问题。直到几天前，我对我的产品产生了这种翻转效果。默认情况下，我没有为此功能安装任何插件。今天我注意到它不再工作了。

我设法通过禁用自动优化插件解决了这个问题。我不知道您是否使用相同的插件，但也许我的回答会对您有所帮助。

【讨论】：