使用 PHP 在悬停时显示图像

Posted 2023-05-08

【中文标题】使用 PHP 在悬停时显示图像

【英文标题】：Show image on hover with PHP

【发布时间】：2012-07-10 02:39:06

【问题描述】：

我的 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

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

再次感谢！ :)

【问题讨论】：

为什么这里没有人提到CSS和:hover:after??????认真的人。坏用户！糟糕！

@rlemon haha​​ 我正在考虑，但我不想一次在 OP 上推太多。

People people people 使用 hover 和 z-index 标签不仅仅是尖叫 OP 想要在 js 中看到的东西。我可能错了，但现在很常见。

通常这不是你会用 PHP 做的事情......

【参考方案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。

【讨论】：

@FlorianMargaine 我总是喜欢让 OP 做一些研究：P 你让事情变得太容易了。

【参考方案2】：

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

尝试改用 javascript AJAX 请求。

【讨论】：

这和 AJAX 有什么关系

@rlemon oy... 以便从服务器获取 OP 可能需要的任何新信息。

可能......但这不是问题的一部分。

【参考方案3】：

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

【参考方案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 值高于图片放在它下面。

希望这会有所帮助。

【讨论】：

所有这些都可以用 css 完成。虽然不是交叉兼容..但可以做到。

确实可以，但恕我直言，Jquery 方法在美学和跨浏览器兼容方面还有更多优势。

【参考方案5】：

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

【讨论】：

jQuery 很常见，所以我在示例中使用了它。无论如何，需要某种方式来存储悬停图像的 URL。我选择了 JS 解决方案。

糟糕，抱歉。当我读到这个问题时，我错过了。我已从答案中删除了具体示例。