如何在Wordpress(woocommerce)中将鼠标悬停在产品图像上? [英] How to flip Product image on hover in wordpress(woocommerce)?

问题描述

我想在鼠标悬停产品图片上更改或翻转产品图片.因此，请建议使用任何wordpress插件或任何代码来实现该效果(并建议要进行更改的文件路径).

I want to change or flip the product image on mouseover product image. So please suggest any wordpress plugin or any code to achieve that effect (also suggest file path of changes to be made).

推荐答案

只需添加自定义图像字段，将2张图像(例如 featured and from custom field )放入包装器并更改层z-index在包装器hover上.... CSS:

just add custom image field, put 2 images (eg. featured and from custom field) in wrapper and change tier z-index on wrapper hover.... CSS:

.product-image--wrapper .img1 {
    position: relative;
    z-index: 1;
}

.product-image--wrapper .img2 {
    position: relative;
    z-index: 0;
}

.product-image--wrapper:hover .img2 {
z-index: 2;
}

..或只需安装: https://wordpress.org/plugins/woocommerce -product-image-flipper/并遵循: http://www.themelocation.com/how-to-flip-product-image-on-hover-in-woocommerce/

..or just install: https://wordpress.org/plugins/woocommerce-product-image-flipper/ and follow: http://www.themelocation.com/how-to-flip-product-image-on-hover-in-woocommerce/

我们使用以下代码修复WooCommerce产品图像翻转器:

we fix WooCommerce Product Image Flipper with this code:

jQuery(document).ready(function($){
    jQuery( 'ul.products li.pif-has-gallery a:first-child' ).hover( function() {
        jQuery( this ).find( '.wp-post-image' ).removeClass( 'fadeInDown' ).addClass( 'animated fadeOutUp' );
        jQuery( this ).find( '.secondary-image' ).removeClass( 'fadeOutUp' ).addClass( 'animated fadeInDown' );
    }, function() {
        jQuery( this ).find( '.wp-post-image' ).removeClass( 'fadeOutUp' ).addClass( 'fadeInDown' );
        jQuery( this ).find( '.secondary-image' ).removeClass( 'fadeInDown' ).addClass( 'fadeOutUp' );
    });
});

这篇关于如何在Wordpress(woocommerce)中将鼠标悬停在产品图像上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！