Javascript/CSS以幻灯片形式将背景显示回选定的悬停状态

我在Wordpress网站www.2eenheid.de上制作了一个幻灯片。 当您将鼠标悬停在幻灯片中的菜单上时，例如Support/Beheer、Implementatie或Cloud，它将显示不同的背景图像。当你点击一个菜单项时，背景也会改变，它会停留在该图像上，除非你再次将鼠标悬停在菜单项上，然后它会停留在你上次悬停的图像上

它应该这样做：

用户选择菜单项并更改背景图像

单击菜单项时，它将保持相同的背景图像

当用户将鼠标悬停在另一个菜单项上时，它会转到另一个图像

悬停时，背景图像将变回所选页面的图像 这是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>

---

悬停元素时，将背景设置为与悬停元素相关的图像

退出悬停时，不会将图像设置回其悬停前的状态

编辑：添加代码示例，未经测试，但它应该让您了解：

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+')' });
 });

我理解这个理论。你能给我一个示例代码吗？我有这个，但问题是我不能把一个硬编码的图片链接作为悬停图片，因为每个页面都有不同的背景图片。如果我这样做，我的悬停函数会被删除吗？有什么想法吗？我检查了你网站上的代码，你缺少
var-imgsrc=''从顶部开始。谢谢，我在站点中添加了它，但我无法在
var imgsrc=''处硬编码图像链接。它在每一页上都有不同的背景图像。关于如何解决这个问题有什么建议吗？使用
var imgsrc=''
，我们只是初始化变量。它是在将鼠标悬停到之前选择的背景图像之前设置的（请参见我答案中代码的第3行）。
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+')' });
 });