Question

    <div  class="product_image">                                        
        <div class="imageWrapper">
            <?php 
            $thumb = get_post_thumbnail_id(); 
            $img_url = wp_get_attachment_url( $thumb,'full' ); 
            $image = aq_resize( $img_url, 280, 300, true ); ?>

             <a rel="lightbox" href="<?php echo $img_url ?>"><img src="<?php echo $image ?>" alt="" /></a>               
             <a class="cornerLink" href="<?php the_permalink(); ?>">Product Details <i class="fa fa-search"></i></a>
        </div>
    </div>

Jquery的

$('.product_image').hover(function(){
 $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});

有人可以提供帮助，我需要做一个悬停效果，当鼠标在产品图片上时，它会从产品库中更改为图像。不知道如何获取产品图库图像。谢谢。

Answer 1

您必须保留this的上下文，在您的代码中this指向#largeImage

$('.product_image').hover(function(){
 var newImg = $(this).attr('src').replace('thumb','large');
 $('#largeImage').attr('src',newImg);
});

使用图库中的图像悬停时更改产品图像

1 个答案: