Question

我在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/

我希望图像在悬停状态下有红色叠加。我怎样才能做到这一点？我已经尝试了其他教程，但我不知道如何使jQuery和/或Javascript适应wordpress和我的特定代码。谢谢！

Answer 1

安德烈是对的。要回答你的问题，我会考虑使用jQuery制作图像fadeOut，以便显示标签的背景并隐藏图像。

例如：

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

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

Answer 2

正如我在评论中所说，你必须使用class-item而不是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/

在悬停上的Wordpress缩略图颜色覆盖

2 个答案: