Блог

В Woocommerce я установил плагин flip product. Он показывает мне вторичное изображение ниже основного. Я пытался с помощью некоторого кода 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:

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

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