如何禁用产品 woo commerce 上的悬停

Question

我有一个 WordPress 网站，主题名为 star Bella- electronics ，集成了 woocommerce，我想禁用产品上的悬停效果。

我没有主题设置来禁用悬停，我尝试使用悬停来查找类，但我没有找到它。

网站：https://trofez-shop.ro/product-category/trofee-si-cupe-personalizate/

Answer 1

添加以下 CSS。

.woocommerce ul.products li.product:hover .secondary-image, .woocommerce-page ul.products li.product:hover .secondary-image{ display: none !important; }
.product-button-hover { display: none !important; opacity: 0 !important; }

Answer 2

将此 css 添加到您的主题 style.css 中

li.product:hover .product-button-hover {
    opacity: 0 !important;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    transform: translateY(0);
}

Answer 3

我找不到解决方案，所以我让副飞行员帮助我。您可以将其粘贴到产品图像小部件上的自定义 css 部分或自定义程序 css 部分中。这有效：

/* 禁用主产品图像上的鼠标悬停缩放效果 */

.woocommerce-product-gallery__wrapper .zoomImg { 显示：无！重要； }

.woocommerce-product-gallery__image img { 指针事件：无； }