Question

在这个Wordpress网站上：http://www.2eenheid.de/cloud/这是一个带菜单的幻灯片。每当用户将鼠标悬停在菜单项上时，背景图像就会变为其伴随图像。当用户点击图像时，它会保留在该图像上。当用户将鼠标悬停在不同的菜单项上时（不点击），它也应该更改回附带的图像。

它在某种程度上是这样做的，但是它会记住它上面的最后一张图像而不是页面的附带图像。

简而言之：

当用户点击“云”时，它会更改为其随附的图像并保持停留状态。
当用户在例如'Webhosting'然后'Unit4 multivers'，背景图像会变回“Webhosting”的伴随图像，因为这是它记住的最后一个项目。
它应该更改回“云”伴随图像，因为用户在此页面上。

任何人都知道我在这里做错了什么？

JAVASCRIPT

    <script type="text/javascript">
        $(function () {
            var imgsrc = '';
            $('ul.slideshow-menu').find('a').hover(function () {
                imgsrc = $('.pikachoose').css('background-image');
                var newImg = $(this).attr('src');
                $('.pikachoose').stop().fadeOut('slow', function () {
                    $(this).css({
                        'background-image': 'url(' + newImg + ')'
                    }).fadeTo('slow', 1);
                });

            }, function () {
                $('.pikachoose').stop().fadeOut('slow', function () {
                    $(this).css({
                        'background-image': imgsrc
                    }).fadeTo('slow', 1);
                });

            });

        });
    </script>

HTML

            <div id="slideshow-main">
                    <ul class="slideshow-menu">
                        <li class="<?php if (is_page('supportenbeheer')) { echo "current_page_item"; }?>"><a title="Support / Beheer" href="/supportenbeheer" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-4.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-4.jpg" alt="2Eenheid"/><span>Support / Beheer</span></a></li>
                        <li class="<?php if (is_page('implementatie')) { echo "current_page_item"; }?>"><a href="/implementatie" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-5.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-5.jpg" alt="2Eenheid"/><span>Implementatie</span></a></li>
                        <li class="<?php if (is_page('cloud')) { echo "current_page_item"; }?>"><a href="/cloud" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-11.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-11.jpg" alt="2Eenheid"/><span>Cloud</span></a></li>
                        <li class="<?php if (is_page('webhosting-en-hosting')) { echo "current_page_item"; }?>"><a href="/webhosting-en-hosting" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-8.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-8.jpg" alt="2Eenheid"/><span>Webhosting / Hosting</span></a></li>
                        <li class="<?php if (is_page('unit4-multivers')) { echo "current_page_item"; }?>"><a href="/unit4-multivers" src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-2.jpg"><img src="<?php bloginfo('template_directory'); ?>/images/slideshow/slideshow-2.jpg" alt="2Eenheid"/><span>Unit4 Multivers</span></a></li>
                    </ul>
                </div>

Answer 1

如果我理解正确，我认为问题在于你想在点击之后设置imgsrc的值，而不是在悬停之前设置更改。

Javascript幻灯片背景图片在鼠标悬停时返回选定的页面图像

1 个答案: