我已经在Wordpress网站www.2eenheid.de上编程了一个幻灯片。当您将鼠标悬停在幻灯片中的菜单上时,例如Support/Beheer、Implementatie或Cloud,它将显示不同的背景图像。当你点击一个菜单项时,背景也会发生变化,它会停留在该图像上,除非你再次悬停在菜单项上,否则会停留在你上次悬停的图像上。
它应该这样做:
- 用户选择菜单项并更改背景图像
- 单击菜单项时,它将保持相同的背景图像
- 当用户将鼠标悬停在另一个菜单项上时,它会转到另一个图像
- 悬停OUT时,背景图像变回所选页面的图像
这是javascript:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('ul.slideshow-menu').find('a').fadeTo('slow', 1);
$('ul.slideshow-menu').find('a').hover(function(){
$(this).fadeTo('slow', 1);
$('.pikachoose').css({ 'background-image' : 'url('+$(this).attr('src')+')' });
}, function(){
$(this).fadeTo('slow', 1);
});
});
</script>
HTML:
<div class="slideshow">
<div class="pika-wrapper">
<div class="pikachoose <?php if (is_page('cloud')) { echo "cloudclass"; }?><?php if (is_page('implementatie')) { echo "implementatieclass"; }?><?php if (is_page('webhosting-en-hosting')) { echo "hostingclass"; }?><?php if (is_page('unit4-multivers')) { echo "unitclass"; }?><?php if (is_page('over-2eenheid')) { echo "overclass"; }?><?php if (is_page('algemene-voorwaarden')) { echo "voorwaardenclass"; }?><?php if (is_page('vacature')) { echo "vacatureclass"; }?><?php if (is_page('contact')) { echo "contactclass"; }?><?php if (is_page('supportenbeheer')) { echo "supportclass"; }?><?php if (is_page('home')) { echo "homeclass"; }?><?php if (is_page('testimonials')) { echo "testimonialsclass"; }?>">
<ul id="pikame" class="jcarousel-skin-pika">
</ul>
</div>
<div class="slideshow-menu-wrapper">
<div class="support-button"><a href="http://www.2eenheid.nl/tmv/tmv.exe" title="Remote support"><img src="<?php bloginfo('template_directory'); ?>/images/supportbutton.png" /></a></div><!-- supportbutton -->
<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>
</div>
</div>
</div>
有人知道我在这里做错了什么吗?
悬停元素时,将背景设置为与悬停元素相关的图像。
退出悬停时,不会将图像设置回悬停前的状态。
编辑:添加代码示例,未经测试,但它应该会给你一个想法:
var imgsrc = '';
$('ul.slideshow-menu').find('a').hover(function(){
imgsrc = $('.pikachoose').css('background-image');
$(this).fadeTo('slow', 1);
$('.pikachoose').css({ 'background-image' : 'url('+$(this).attr('src')+')' });
}, function(){
$(this).fadeTo('slow', 1);
$('.pikachoose').css({ 'background-image' : 'url('+imgsrc+')' });
});