CSS / PHP - 悬停和if语句重叠图片 [英] CSS/PHP - Overlaying an Image with Hover and If Statements

问题描述

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

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

您可以在那里看到箭头和玩家，但是我希望它们位于图像的顶部，并且仍然会改变PHP的反馈。我怎么能做到这一点？

解决方案

我认为你正在从一个 ，即使不完全错误。据我所知，你有图像在悬停上进行交互，但你所要做的只是简单地使用CSS和类，然后混合你的PHP来获取数据。

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

这是一个演示

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

1. 将主图像显示为背景图像而不是 img 元素。这样就可以通过CSS交换它，即使我们在这个例子中不需要它。




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




3. 显示有关将在上显示的其他覆盖元素的附加信息：使用 rgba背景色来悬停父元素。如果你想提高浏览器的兼容性，你可以通过CSS完全改变父节点 div 的 background-image 如（1。）中所述。




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

PHP / HTML

 < div class =server> 
< div class =overlay> 
< h1>< span>饥饿游戏< / span>< small> HG1.Play-Minezone.co< / small>< / h1> 
< div class =more-info> 
< p>饥饿游戏是一款全面的核心PvP体验，只有一位
赢家。游戏的目标是成为最后一个站立的人。 
你会和别人合作，独自一人，征服战场吗？< / p> 
< p>只有您自己决定< / p> 
< / div> 
< div class =arrow<？php echo $ serverUp？'up'：'down';？>><！ - 你可以在这里想要一些信息它更容易访问，并且可能通过使用某种图像替换技术隐藏它
>< / div> 
< div class =numbers><？php echo $ numbers; ？>< / DIV> 
< / div> 
< / div> 
  

CSS

css ，在我的示例中，我使用了更多样式，但您可以自由检查。

> .server {
background：url（'/ yourimage.jpg'）center no-repeat; //在这里放置你的
//主图像
width：300px;
height：300px;
overflow：hidden;
职位：亲属;
}

.server：hover .overlay {
background-color：rgba（0,0,0,0.5）; // Rgba在这里，如果你愿意的话，可以使用一个
//图像，效果已经达到
}

.server：hover .more-info {
显示：块;
}

.overlay {
position：absolute;
身高：100％;
宽度：100％;
}

.more-info {
display：none;
宽度：100％;
}

.numbers {
position：absolute;
底部：10px;
right：5px;
}

.arrow {
width：40px;
height：40px;
位置：绝对;
bottom：10px;
left：5px;
}

.arrow.up {
background-color：green; //在你的情况下，你将有背景图像
//在这里为你的绿色箭头图像
}

.arrow.down {
background-color：red ; //见上面，但对于红色箭头
}

I'm currently creating a Minecraft server listing page for a client. However am stuck on one thing, which I haven't done before. Please see this image (sorry for Paint usage. I was rushing!)

Basically, the 'Normal' image will change to the 'Hover' image when hovering. I can do this just fine, however, see those up and down arrows, and the 45/90? I will be needing them to change depending on what the PHP query receives. I have all the PHP ready. It currently looks like this:

You can see the arrows and the players online there, however I want them to be on top of the images, and still change on what the PHP feeds back. How can I do this?

解决方案

I think you are approaching the problem from a slightly ineffecient perspective, even if not completely wrong. As far as I understand, you have images interacting on hover, but all you are trying to do could be done with the simple use of CSS and classes, then mixing your PHP for the data retrieval.

You could of course do it with images, and if you really need it, I can tell you how; but I thought you might consider this other solution.

Here is a demo

Here are some suggestion to improve the approach:

1. Display your main image as a background-image rather than an img element. This way it opens the possibility to swap it via CSS, even if we're not going to need it in this example.

2. Use the arrows as well as background-image on absolutely positioned elements. Perhaps consider improving accessibility by using some image replacement technique.

3. Display your additional information on an additional overlay element which will be displayed on :hover of the parent element, with an rgba background-color. If you want to improve browser compatibility, you can fallback to altogether change the background-image of the parent div via CSS as mentioned in (1.).

4. Display your text via a PHP variable and your arrow by changing the class of the element described over in (2.) using a simple conditional statement.

PHP/HTML

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

CSS

I put here some essential css, in my example I use a bit more styling, but you can freely check that out.

.server {
  background: url('/yourimage.jpg') center no-repeat; // Place here your
                                                      // main image
  width:  300px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.server:hover .overlay{ 
   background-color: rgba(0,0,0,0.5); // Rgba goes here, if you prefer, use an
                                      // image with the effect already achieved
}

.server:hover .more-info{ 
  display: block;
}

.overlay{ 
  position: absolute;
  height: 100%;
  width: 100%;
}

.more-info{ 
  display: none;
  width: 100%;
}

.numbers{ 
  position: absolute;
  bottom: 10px;
  right: 5px;
}

.arrow{ 
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 10px;
  left: 5px;
}

.arrow.up{ 
  background-color: green;  // In your case you would have background-image
                            // for your green arrow image here
}

.arrow.down{ 
  background-color: red;    // See above, but for red arrow
}

这篇关于CSS / PHP - 悬停和if语句重叠图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！