在这个 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>