在 Woocommerce 中悬停时翻转产品图像答案

【问题标题】：Flip Product image on hover in Woocommerce在 Woocommerce 中悬停时翻转产品图像
【发布时间】：2019-07-25 15:06:27
【问题描述】：

使用 Woocommerce，我已经安装了翻转产品插件。它向我显示了主要图像下方的次要图像。我尝试使用一些 CSS 和 jQuery 代码来更改悬停时的不透明度，但它不起作用。

CSS 规则：

ul.products>.product .mkd-pl-inner .mkd-pl-image .pif-has-gallery .wp-post-image--secondary:hover{opacity:1!important}

jQuery 代码：

<script type="text/javascript">
jQuery(document).ready(function($){
    jQuery('ul.products li.pif-has-gallery img’ ).hover( function() {
        jQuery(this).find('.attachment-woocommerce_thumbnail').removeClass('fadeInDown').addClass('animated fadeOutUp');
        jQuery(this).find('.secondary-image').removeClass('fadeOutUp').addClass('animated fadeInDown');
    }, function() {
        jQuery(this).find('.attachment-woocommerce_thumbnail').removeClass('fadeOutUp').addClass('fadeInDown');
        jQuery(this).find('.secondary-image').removeClass('fadeInDown').addClass('fadeOutUp');
    });
});
</script>

这是网站：https://goldandroses.com/shop/

【问题讨论】：

标签： jquery css wordpress woocommerce hover

【解决方案1】：

请试试这个：

jQuery:

jQuery(".pif-has-gallery").on('mouseenter', function () {
    jQuery(this).find('.wp-post-image').css('opacity','1');
});
jQuery(".pif-has-gallery").on('mouseleave', function () {
     jQuery(this).find('.wp-post-image').css('opacity','0');
});

CSS：

.pif-has-gallery:hover .wp-post-image {
    opacity: 1!important;
}

请看截图：

【讨论】：

它给了我：Uncaught SyntaxError: Unexpected identifier
更新了我的答案，请立即尝试。
悬停时没有变化...不知道你有什么想法
@LuisGil，请将此css放入style.css文件.pif-has-gallery:hover .wp-post-image { opacity: 1!important; }
现在完美了。