在循环中翻转时更改缩略图图像

Question

我有一个问题。我正在使用wordpress，并有一个博客，其中的帖子显示缩略图。当你把鼠标放在上面时，我希望这些缩略图能够改变。问题是我希望不同的图像改变缩略图。基本上，每个缩略图都有其独特的翻转图像。问题是我不太清楚如何将js代码附加到循环中。以及如何为不同的帖子创建不同的翻转图像 如果我将js代码附加到固定链接，它会将所有缩略图更改为相同的图片。 另外，我被告知可以用jquery做。值得吗？
我试图尽可能清楚 任何帮助表示赞赏！

Answer 1

您可以为每个名为hoverImg的帖子添加自定义字段，该值是您要用作翻转图像的图像的链接。

然后你在循环中获取链接，并添加它：

<?php $hover_image = get_post_meta($post->ID, 'hoverImg', true); ?>

<img class="hover-img" src="<?php echo $hover_image; ?>" />  

此图片应该最初不可见，并定位为缩略图的叠加层。然后用jquery悬停显示它。

由于我没有您的图像，我创建了一个带有两个div的jsFiddle，一个代表您的缩略图，另一个代表您的翻转图像以模仿效果：

http://jsfiddle.net/9Xa92/1/

您应该将jsfiddle中的<div class="hover-img"></div>替换为实际的缩略图（上面创建的）。