2

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

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

再次感谢！:)

4

5 回答 5

9

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

于 2012-07-10T15:24:15.977 回答
4

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

尝试改用 javascript AJAX 请求。

于 2012-07-10T15:12:03.467 回答
1

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

于 2012-07-10T15:12:47.747 回答
0

首先，您不需要elseif声明。Anelse将起到相同的作用，除非您打算使用既不存在缩略图也不存在视频图像的空白标签。

<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);

    });

});

要将图像放置在另一个图像之上，您需要确保您的 CSSabsolute对图像使用定位，并且在悬停时覆盖另一个图像的图像的z-index值高于位于其下方的图像。

希望这可以帮助。

于 2012-07-10T15:23:20.143 回答
-2

您需要一些 JavaScript 和/或 CSS 来完成这项工作，因为 PHP 在服务器端，而不是在客户端浏览器中。

于 2012-07-10T15:15:06.463 回答