CSS / PHP - 使用悬停和语句覆盖图像

Question

我目前正在为客户创建一个Minecraft服务器列表页面。但是我坚持一件事，我以前没有做过。请看这张图片（抱歉使用Paint。我很急！）

基本上，悬停时“正常”图像会变为“悬停”图像。我可以做到这一点很好，但是，看到那些上下箭头和45/90？我将需要他们根据PHP查询收到的内容进行更改。我准备好了所有的PHP。它目前看起来像这样：

你可以在那里看到箭头和在线玩家，但是我希望它们能够在图像之上，并且仍然可以改变PHP反馈的内容。我怎么能这样做？

Answer 1

我认为你正从一个稍微无效的角度来解决问题，即使并非完全错误。据我所知，你有悬停的图像交互，但你想要做的只是简单地使用CSS和类，然后混合你的PHP进行数据检索。

你当然可以用图像来做，如果你真的需要它，我可以告诉你如何;但我想你可能会考虑另一个解决方案。

Here is a demo

以下是改进方法的一些建议：

1. 将您的主要图片显示为background-image而非img元素。这样就可以通过CSS 交换它，即使我们在这个例子中不需要它。

2. 在绝对定位的元素上使用箭头和background-image。也许可以考虑通过使用一些图像替换技术来改善可访问性。

3. 显示有关其他叠加元素的附加信息，该元素将显示在父元素的:hover上，并带有rgba background-color。如果您想提高浏览器兼容性，可以通过CSS完全更改父background-image的{​​{1}}，如（1。）中所述。

   < / LI>

4. 通过PHP变量和箭头显示文本，方法是使用简单的条件语句更改（2.）中描述的元素的类。

PHP / HTML

div

CSS

我在这里放了一些基本的 css ，在我的例子中我使用了更多样式，但你可以自由地检查出来。

<div class="server">
    <div class="overlay">
      <h1><span>Hunger games</span><small>HG1.Play-Minezone.co</small></h1>
      <div class="more-info">
        <p>Hunger games is a full-out hardcore PvP experience, with only one
           winner. The objective of the game is to be the last one standing.
           Will you team with others, go solo, and conquer the battlefield?</p>
        <p>Only you are left to decide</p>
      </div>
        <div class="arrow <?php echo $serverUp ? 'up' : 'down'; ?>"><!-- You may
            want some info here to make it more accessible, and perhaps hide it
            by using some image replacement technique --></div>
        <div class="numbers"><?php echo $numbers; ?></div>
    </div>
</div>

Answer 2

您的图像需要位于具有相对位置的父节点（可能是DIV）中。箭头将具有绝对位置在图像顶部。您需要设置箭头的x和y值。现在CSS应该可以在一个类的基础上正常工作。例如：

<div class="rel-wrapper <?php $showRed ? 'show-red' : 'show-green'; ?>">

<img src="..." />

<img src="..." class="arrow" />

</div>

.rel-wrapper .arrow { display:none; }

.show-red:hover .arrow { display:block; }

.show-green:hover .arrow { display:block; }