我想在 Woocommerce wordpress 中更改悬停时的产品图片

Question

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

所以你知道另一个免费的插件吗我不在乎或者你知道 CSS 的其他解决方案也许我不知道

我正在使用

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

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

Answer 1

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

您可以在此处的 CodePen 上看到：https://codepen.io/St3ph3n92/pen/BaopGQx

或运行这个片段：

.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")
}

<div class="image-holder"><div>

希望对您有所帮助。

Answer 2

谢谢 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")
}

<div class="product-image"><div>

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

再次感谢您的回答！！！

Answer 3

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

这里的文件夹路径上有一个 Whosebug post，它可能非常有用：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 来引用图像。这有点棘手。这里还有另一个 Whosebug post：

Answer 4

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

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

Answer 5

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

再次感谢您的帮助@st3ph3n92

我想在 Woocommerce wordpress 中更改悬停时的产品图片

I want to change Product Image on Hover in Woocommerce wordpress

css

wordpress

hover

woocommerce