Javascript 非父/非同级Div悬停时的Div背景图像更改

这是一个有点复杂的过程，但我会尽我所能解释它。我正在wordpress中创建一个公文包，并尝试尽可能多地加入活力

我在页面顶部有一个大横幅图像，下面是我作品的个人缩略图。我想做的是能够悬停在缩略图上，让它们通过使用与缩略图相同的图像源，将标题图像淡入缩略图的更大版本

为了让事情变得更复杂，页面缩略图是通过循环浏览带有特色图片的“公文包”帖子生成的。这意味着我没有每个链接的硬拷贝，而是需要用我用来创建拇指的类似PHP代码生成它

我原以为我可能只使用CSS就可以做到这一点，但我的研究让我发现，如果元素彼此不相关，无论是作为父元素还是兄弟元素，这都是不可行的

这种事情可能发生吗？我假设我必须使用javascript，但我对该语言的了解远不如对CSS/HTML的了解

有问题的网站是

编辑：

这是我用来生成缩略图的代码

<?php
    $query = new WP_Query(array('posts_per_page' => 6, 'meta_key' => '_thumbnail_id'));
        while($query->have_posts()) : 
            $query->the_post(); ?>
            <div class="portfolioThumbnail"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></div><?php
            endwhile;
?>

简言之，该网站的组成如下：

<div id="backgroundThatNeedsToChangeOnHover"></div>

<navigation></nav>

<div id="content">

    <div class="portfolioThumbnail">
        <a href="spawnedByPHP"><img src="spawnedByPHP" /></a>
    </div>

    <div class="portfolioThumbnail">
        <a href="spawnedByPHP"><img src="spawnedByPHP" /></a>
    </div>

    <div class="portfolioThumbnail">
        <a href="spawnedByPHP"><img src="spawnedByPHP" /></a>
    </div>

</div>

---

下面是一个使用jquery的简化示例：

使用悬停和淡入淡出更新：

---

我遇到了一个小问题，标题无法返回到原始图像（这是代码的需要）。从有效的代码角度来看，这是否有效？我会为这两个事件添加动画

$(function(){
    var headImg = $('.header').css("backgroundImage");

  $('.thumb').mouseover(function(){
    $('.header').css("backgroundImage", "url(" + $(this).attr("src") + ")");
  });

  $('.thumb').mouseleave(function(){
      $('.header').css("backgroundImage", headImg);
  });
});

更新了带有淡入/淡出和停止动画的JSFIDLE

---

更新：Wordpress不理解延迟（）。将其从代码中删除。

请在您的帖子中包含相关代码，以便我们可以帮助您解决此问题。这看起来会很好地工作！有没有办法添加动画？将其更改为悬停操作是否简单到将“单击”替换为“onmouseover”？

var url;
$(function(){
  $('.header').css("backgroundImage", "url( http://lorempixel.com/100/100/abstract/9 )");
  $('.thumb').hover(function(){
    url = "url(" + $(this).attr("src") + ")";
    $('.header').animate({opacity: 0}, 500, function(){
      $(this).css("backgroundImage", url).delay(100).animate({opacity: 1}, 500);
    });
  });
});

$(function(){
    var headImg = $('.header').css("backgroundImage");

  $('.thumb').mouseover(function(){
    $('.header').css("backgroundImage", "url(" + $(this).attr("src") + ")");
  });

  $('.thumb').mouseleave(function(){
      $('.header').css("backgroundImage", headImg);
  });
});

$(function(){
    var headImg = $('.header').css("backgroundImage");
    var url;

  $('.thumb').mouseover(function(){
      url = "url(" + $(this).attr("src") + ")";
      $('.header').stop().animate({opacity:0}, 250, function(){
      $(this).css("backgroundImage", url).animate({opacity: 1}, 250);
      });
  });

  $('.thumb').mouseleave(function(){
      $('.header').stop().animate({opacity:0}, 250, function(){
          $(this).css("backgroundImage", headImg).animate({opacity: 1}, 250);
      });
  });
});