Question

我正在尝试创建一个wordpress类别页面，列出我的产品主缩略图以及鼠标悬停在第一个缩略图上的第二个缩略图。

我能够在第一张图片上工作： http://www.anapiazza.com.br/category/anel/

但它不能复制到其他产品图片。

我正在使用名为多个帖子缩略图的插件，以允许每个帖子有多个缩略图。

这是我正在使用的Jquery：

<script>        
    $(document).ready(function(){
        $("#productcell").mouseenter(function(){
            $("#thumbnail_over").fadeIn("slow");
        });
    });

            $(document).ready(function(){
        $("#productcell").mouseleave(function(){
            $("#thumbnail_over").fadeOut("slow");
        });
    });

</script>

这就是我在PHP页面上看起来的样子：

<div id="productcell">

        <!-- Image Swap Mouse Over -->

            <a href="<?php the_permalink() ?>">


            <div id="thumbnail_normal"><?php the_post_thumbnail(); ?></div>

            <div id="thumbnail_over" style="display: none">
                <?php if (class_exists('MultiPostThumbnails')) :
                MultiPostThumbnails::the_post_thumbnail(
                get_post_type(),
                'secondary-image'
                );
                endif; ?>
            </div>


            </a>             

        </div>

这是我在页面这一部分的CSS：

#productcell {float: left; position: relative;  width:30%; height: 40%; margin: 1%}
#thumbnail_normal {position: absolute; width: 100%; height: 100%; }
#thumbnail_normal img {max-width: 100%; height: auto}
#thumbnail_over {position: absolute; z-index: 10}
#thumbnail_over img {max-width: 100%; height: auto}

我知道有很多事情发生......也许我对我想要完成的事情有点怀疑......无论如何 - 任何人都知道会出现什么问题？

Answer 1

您要为多个元素声明 ID ，ID是唯一的。将这些元素更改为类的 HTML

 <a href="<?php the_permalink() ?>"> <div class="thumbnail_normal"><?php the_post_thumbnail(); ?></div> <div class="thumbnail_over" style="display: none"> <?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail( get_post_type(), 'secondary-image' ); endif; ?> </div> </a> </div>

<强> JS

<script> $(document).ready(function(){ $(".productcell").mouseenter(function(){ $(".thumbnail_over").fadeIn("slow"); }); }); $(document).ready(function(){ $(".productcell").mouseleave(function(){ $(".thumbnail_over").fadeOut("slow"); }); }); </script>

<强> CSS

.productcell {float: left; position: relative; width:30%; height: 40%; margin: 1%} .thumbnail_normal {position: absolute; width: 100%; height: 100%; } .thumbnail_normal img {max-width: 100%; height: auto} .thumbnail_over {position: absolute; z-index: 10} .thumbnail_over img {max-width: 100%; height: auto}

Jquery Mouse Over / Category listing / Multiple Thumbnails

1 个答案: