Question

这是一个复杂的过程，但我会尽我所能解释它。我在wordpress中创建了一个投资组合，并尝试尽可能多地包含动力。

我在页面顶部有一个大横幅图片，下面是我工作的各个缩略图。我想要做的是能够将鼠标悬停在缩略图上，并使用与缩略图相同的图像源将标题图像淡化为缩略图的较大版本。

为了使问题更复杂，页面缩略图是通过循环播放＆＃34;投资组合＆＃34;有特色图片的帖子。这意味着我没有每个链接的硬拷贝，而是需要使用我用来创建拇指的类似PHP代码来生成它。

我以为我可能只能使用CSS来做这件事，但是我的研究让我发现，如果这些元素彼此无关，无论是父母还是兄弟，都是不可行的。

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

相关网站为here。

编辑：

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

<?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>

Answer 1

以下是使用jquery的简化示例：JSfiddle

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

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

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

Answer 2

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

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

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

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

JSFiddle

使用淡入/淡出和停止动画更新了JSFiddle JSFiddle

$(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);
      });
  });
});

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

在非父/非兄弟div的悬停时Div背景图像改变

2 个答案: