-1

我目前正在为客户创建一个 Minecraft 服务器列表页面。然而，我被困在一件事上，这是我以前没有做过的。请看这张图片（对不起油漆的使用。我很着急！）

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

您可以在那里在线看到箭头和玩家，但是我希望它们位于图像之上，并且仍然可以更改 PHP 反馈的内容。我怎样才能做到这一点？

4

2 回答 2

1

我认为你是从一个有点低效的角度来处理这个问题，即使不是完全错误的。据我了解，您有图像在悬停时进行交互，但是您要做的所有事情都可以通过简单使用 CSS 和类来完成，然后混合您的 PHP 进行数据检索。

你当然可以用图像来做，如果你真的需要它，我可以告诉你怎么做；但我认为您可能会考虑其他解决方案。

Here is a demo

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

  1. 将您的主图像显示为一个background-image而不是一个img元素。通过这种方式，它打开了通过 CSS 交换它的可能性，即使我们在这个例子中不需要它。

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

  3. 在将显示在:hover父元素上的附加覆盖元素上显示您的附加信息，并带有rgba background-color. 如果你想提高浏览器的兼容性，你可以回退到通过 CSS完全改变background-image父级，如(1.)中所述。div

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

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

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

.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
}
于 2013-03-10T00:25:52.103 回答
0

Your image will need to be in a parent node, probably a DIV, with the position of relative. The arrow will have the position of absolute sitting on top of the image. You will need to set the x and y value of the arrow. Now the CSS should work fine based on a class. For example:

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

于 2013-03-09T23:55:49.117 回答