悬停时 WordPress 缩略图颜色叠加

发布于 2024-11-07 23:58:41 字数 489 浏览 0 评论 0原文

我的 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。谢谢！

原文

I have this code in my wordpress site for turning the "Featured Image" into a thumbnail:

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

This is what the site looks like this far:
http://www.steakmob.com/porftolio/

I would like for the images to have a red overlay on the hover state. How can I achieve this? I've tried other tutorials, but I do not know how to adapt the jQuery and/or Javascript for wordpress and my specific code. Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冷了相思 2024-11-14 23:58:41

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

例如：

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

您需要确保您的 a 元素设置为 display:block，并具有宽度和高度。您还可以考虑使用悬停意图插件。

Andre is correct. To answer your question, I would consider making the image fadeOut using jQuery, so that the background of the a tag shows and the image is hidden.

For example:

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

You will need to make sure your a element is set to display:block, with a width and height. You may also consider using the hover intent plugin.

回复收藏 0 原文

兮子 2024-11-14 23:58:41

正如我在评论中所说，您必须使用投资组合项目的类名，而不是 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/

As I said in comment, you must use class name for portfolio-item, instead of id.

Said that, you can use this code to overlay hovered images with an red 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();
    });
});

Here's a working fiddle:

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

回复收藏 0 原文

~没有更多了~