在Woocommerce中将鼠标悬停在翻页产品图片上

Question

使用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/

Answer 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;
}

请查看屏幕截图：