如何在wordpress中悬停时翻转产品图像? [英] How to flip Product image on hover in wordpress?

问题描述

我想更改或翻转鼠标悬停在产品图片上的产品图片.所以请建议任何 WordPress 插件或任何实现该效果的代码(同时建议更改文件路径).

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

推荐答案

只需添加自定义图像字段，将 2 个图像(例如精选和来自自定义字段)放入包装器并更改层 包装器 hover 上的 z-index....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 Product Image Flipper:

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中悬停时翻转产品图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！