使用PHP在悬停时显示图像 - Show image on hover with PHP

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

这正是我想要的地方，经过一些修改以满足我的需求，我让它发挥了作用。有时候事情很容易，而你却在寻找艰难的道路。因此，对于每个有同样问题的人：你可以使用这里很棒的人提供的解决方案之一，或者查看上面的链接。

再次感谢！：）

您可以使用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。

您不能在客户端随机执行服务器端代码。

请尝试使用javascript AJAX请求。

PHP是一种服务器端语言；您无法在页面加载后让PHP执行（因为PHP在页面加载前完全完成解析）。如果你想要悬停事件，你需要JS。

首先，您不需要elseif语句。else也可以达到同样的目的，除非您打算在既没有缩略图也没有视频图像的地方使用空白标签。

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

您不能明确地将PHP用于客户端功能。您需要使用javascript或jquery来提供悬停功能。

Jquery示例：

$(function() {
    $('a').hover(function() {
        // Code to execute whenever the <a> is hovered over
        // Example: Whenever THIS <a> tag is hovered over, display
        //          the hidden image that has a class of .rollover
        $(this + ' .rollover').fadeIn(300);
    }, function() {
        // Execute this code when the mouse exits the hover area
        // Example (inline with above example)
        $(this + ' .rollover').fadeOut(300);
    });
});

要将一个图像放在另一个图像的顶部，您需要确保您的CSS对图像使用absolute定位，其中悬停时要覆盖另一个的图像的z-index值高于位于其下方的图像。

希望这能有所帮助。

您需要一些JavaScript和/或CSS来实现这一点，因为PHP在服务器端，而不是在客户端浏览器中。