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/，以确保您仍在支持的浏览器中。例如，仅在启动IE8时支持:after。

Answer 2

您无法在客户端随机执行服务器端代码。

尝试使用javascript AJAX请求。

Answer 3

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

Answer 4

首先，您不需要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值高于图像下面的值。

希望这有帮助。

Answer 5

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

用PHP悬停显示图像

5 个答案:

编辑：