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

通过Woocommerce，我安装了flip产品插件。它向我显示了主屏幕下方的次映像。我曾尝试使用一些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>

jQuery（文档）.ready（函数（$）{
jQuery（'ul.products li.pif-has-gallery img'）。悬停（函数（）{
jQuery（this）.find（'.attachment-woocommerce_缩略图'）.removeClass（'fadeInDown'）.addClass（'animated fadeOutUp'）；
jQuery（this）.find（'.secondary image'）.removeClass（'fadeOutUp'）.addClass（'animated fadeInDown'）；
}，函数（）{
jQuery（this）.find（'.attachment-woocommerce_缩略图'）.removeClass（'fadeOutUp'）.addClass（'fadeInDown'）；
jQuery（this）.find（'.secondary image'）.removeClass（'fadeInDown'）.addClass（'fadeOutUp'）；
});
});

这是网站：

请尝试以下内容：

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:

请参见屏幕截图：

---

它给了我：未捕获的语法错误：意外标识更新了我的答案，请立即尝试。悬停时没有更改。。。不知道你有没有idea@LuisGil，请将此css放入style.css文件

。pif有gallery:hover.wp post image{opacity:1！important；}

它现在很完美。

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