php - 使用 PHP 在悬停时显示图像

Question

我的 PHP 代码有一个小问题，如果有人能帮助我，那就太好了。我想将鼠标悬停在链接上时显示图像。这是我现在拥有的 PHP 代码的链接:

<a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail() ) {the_post_thumbnail();} else if ( has_post_video() ) {the_post_video_image();}?></a>

此代码显示图像，但我想在将鼠标悬停在带有图像的链接上时执行此代码:

<?php echo print_image_function(); ?>

该代码还显示属于某个类别的图像。我不希望初始图像消失，我只是想将鼠标悬停在第一个图像上时在第一个图像之上显示第二个图像。

我不知道这是否有帮助，但我使用 Wordpress 并且我不是 PHP 专家。我什至不知道这是否有效。这就是为什么我问是否有人可以帮助我解决这个问题。

提前致谢

谢谢大家

我要感谢所有花时间阅读我的帖子并通过提供解决方案来帮助我的人。我没想到这么快就有这么多答案。在花了几个小时尝试让它与 PHP、CSS 和 Javacript 一起工作之后，我在这个网站上偶然发现了以下问题:Solution

这正是我正在寻找的地方，经过一些修改以满足我的需求，我让它工作了。有时候，当你在寻找艰难的道路时，事情却变得如此简单。因此，对于遇到同样问题的每个人:您可以使用这里的优秀人员提供的解决方案之一，或者查看上面的链接。

再次感谢! :)

Answer 1

您可以使用 CSS 来完成此操作(如果您愿意，并且这适合您的整体架构) - 这是使用 :hover 条件和 :after 伪元素的示例。
html

<a href="#" class="foo"><img src="http://www.gravatar.com/avatar/e5b801f3e9b405c4feb5a4461aff73c2?s=32&d=identicon&r=PG" /></a>​

CSS

.foo {
    position: relative;
}
.foo:hover:after {
    content: ' ';
    background-image: url(http://www.gravatar.com/avatar/ca536e1d909e8d58cba0fdb55be0c6c5?s=32&d=identicon&r=PG);
    position: absolute;
    top: 10px;
    left: 10px;
    height: 32px;
    width: 32px;   
}​

http://jsfiddle.net/rlemon/3kWhf/此处演示

编辑:

在使用新的或实验性 CSS 功能时，请始终引用兼容性图表 http://caniuse.com/以确保您仍在使用受支持的浏览器。例如，:after 仅从 IE8 开始受支持。