用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一起工作后,我在这个网站上偶然发现了以下问题:解决方案

这正是我寻找的地方,经过一些修改以满足我的需求,我开始工作了.有时候,在寻找艰难的方式时,事情会变得如此简单.因此,对于遇到相同问题的每个人:您可以使用其中一个解决方案,这些解决方案由优秀人员在此处提供,或者查看上面的链接.

再次感谢!:)

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/ demo这里

编辑:

总是在使用新的或实验性的CSS功能时,请参考兼容性图表http://caniuse.com/,以确保您仍在支持的浏览器中.例如,:after仅支持启动IE8.