Переверните изображение товара при наведении курсора на 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;
}

Пожалуйста, смотрите скриншот: