在循環中更改翻轉時的縮略圖

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上即可。

由於我沒有您的圖像，因此我創建了一個jsFiddle，它具有兩個div，一個代表您的縮略圖，一個代表您的過渡圖像，以模仿效果：

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

您只需將jsfiddle中的<div class="hover-img"></div>替換為實際的縮略圖（如上創建）。