Блог

Главная - Вопросы по программированию - Наведение курсора мыши на Jquery / Список категорий / Несколько миниатюр

Наведение курсора мыши на Jquery / Список категорий / Несколько миниатюр

#jquery #css #wordpress

#jquery — запрос #css — файл #wordpress #jquery #css

Вопрос:

Я пытаюсь создать страницу категории WordPress, на которой перечислены основные миниатюры моих товаров, а также вторая миниатюра при наведении курсора мыши на первую.

Мне удалось заставить это сработать на первом изображении:http://www.anapiazza.com.br/category/anel /

Но это не дублирует изображения других продуктов.

Я использую плагин под названием Multiple Post Thumbnails, чтобы разрешить несколько миниатюр для каждого поста.

Это часть 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}

Я знаю, что там многое происходит… Возможно, я немного неоднозначно отношусь к тому, чего пытаюсь достичь… В любом случае — у кого-нибудь есть представление о том, что может пойти не так?

Комментарии:

1. Идентификаторы элементов должны быть уникальными в HTML-документе. Вы используете несколько идентификаторов по нескольку раз каждый, так что это самое первое, что вам нужно исправить.

Ответ №1:

Вы объявляете ID для нескольких элементов, идентификатор уникален. Измените эти элементы на классы.
HTML 

         <!-- Image Swap Mouse Over -->

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