php - 将鼠标悬停在缩略图上时显示信息

Question

我在我的网站上创建了一个网格组合页面，我希望为缩略图添加一个功能。我希望每当有人将鼠标悬停在缩略图上时，它都会显示帖子标题、帖子日期和摘录。

我一直在试图找到一个例子来说明我的意思，这非常相似；

http://lucybenson.net/redesign2011/

到目前为止，我在 Wordpress 上的循环看起来像这样

http://pastie.org/2135220

有没有一个插件可以做到这一点？如果没有，谁能告诉我如何实现这一目标？

提前致谢。

Answer 1

这种事情有插件，但自己很容易做到。

这未经测试，但它应该让你朝着正确的方向前进：

<style type="text/css" media="screen">

    .image-list {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .image-list li {
        margin: 0 10px 0 0;
        padding: 0;
        float: left;
    }

        .image-list li a {
            display: block;
            position: relative;
            height: 50px;
            width: 50px;
        }

            .image-list li a span {
                display: block;
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background-color: rgba(0,0,0,0.4);
                color: #fff;
            }

</style>

<ul class="image-list">
    <li>
        <a href="#">
            <img src="myimage.jpg" alt="My Image">
            <span>
                This is my overlay content
            </span>
        </a>
    </li>
</ul>

<script type="text/javascript">

$(function() {

    $(".image-list li a").hover(

        // Mouse Over
        function() {

            $(this).find("span").fadeIn();

        }, 

        // Mouse Out
        function() {

            $(this).find("span").fadeOut();

        }
    );

});

</script>

Answer 2

如果你正在寻找一个独立于 javascript 的解决方案——我知道，听起来很傻，但值得一试——你可以纯粹通过 CSS 来实现。这不是太难 - http://jsfiddle.net/teddyrised/TWBhU/

我所做的是使用-webkit-transition/ transition property。当然，我的解决方案没有 Jesse 发布的那么优雅，但是很高兴知道 CSS 也可以发挥一些神奇的作用。

Answer 3

您需要在这里对一些事情进行排序 - 首先您需要了解将一件事情放在另一件事情之上 - 所以这就是您在使用 :hover 类的 css 中真正简单地完成的效果。关键是在绝对定位的包装中使用绝对位置来获取图像顶部的文本

http://jsfiddle.net/aDwe4/

接下来你想要淡入淡出项目 - 有些人可能不喜欢它 - 但是 jquery 让这非常容易 - 删除悬停类并将动画功能放在一些脚本标签的页脚中

http://jsfiddle.net/aDwe4/1/

最后你现在需要把它翻译成你的wordpress模板——我不确定你的模板发生了什么——所以我只写一个例子。我会安装get_the_image 插件，然后在你的循环中放入类似的东西

<div class="imagewrap">
<div class="image">
<?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
</div>
<div class="copy">
<h3><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<?php the_excerpt(); ?>
</div>
</div>

您显然将不得不查看 get_the_image 的工作原理，但我认为您应该笑了！