悬停时的 Wordpress 缩略图颜色叠加答案

【问题标题】：Wordpress thumbnail color overlay on hover悬停时的 Wordpress 缩略图颜色叠加
【发布时间】：2011-05-17 16:05:20
【问题描述】：

我的 wordpress 网站中有这段代码，用于将“特色图片”转换为缩略图：

<div class="portfolio-item">
<?php
if ( has_post_thumbnail()) {
echo '<a href="' . get_permalink($post->ID) . '" >';
the_post_thumbnail();
echo '</a>';
}
?>
</div>

这是该网站目前的样子： http://www.steakmob.com/porftolio/

我希望图像在悬停状态上有一个红色叠加层。我怎样才能做到这一点？我尝试过其他教程，但我不知道如何为 wordpress 和我的特定代码调整 jQuery 和/或 Javascript。谢谢！

【问题讨论】：

你的代码错了。您正在将 portifolio-item 设为一个 id，它应该是一个类（您不能有多个具有相同 id 的元素）

标签： jquery wordpress colors hover overlay

【解决方案1】：

安德烈是正确的。为了回答您的问题，我会考虑使用 jQuery 使图像淡出，以便显示 a 标签的背景并隐藏图像。

例如：

$(".portfolio-item a").hover(
  function () {
    $(this).find('img').fadeOut("fast");
  }, 
  function () {
    $(this).find('img').fadeIn("fast");
  }
);

您需要确保您的 a 元素设置为 display:block，具有宽度和高度。您也可以考虑使用hover intent 插件。

【讨论】：

【解决方案2】：

正如我在评论中所说，您必须为投资组合项目使用类名，而不是 id。

也就是说，您可以使用此代码用红色 div 覆盖悬停的图像：

$(function(){
    $("#portfolio-content .portfolio-item").hover(function(){
        var curElem = $(this).children(); // current image
        $('<div />').addClass('overlay')
                    .css('width',curElem.css('width'))
                    .css('height',curElem.css('height'))
                    .prependTo($(this).children('a'));
        return false;
    }, function(){
       $(this).children('a').children('.overlay').remove();
    });
});

这是一个有效的小提琴：

http://jsfiddle.net/wus7H/1/

【讨论】：