Question

我正在为他们做一个朋友数学竞赛，因为他们正在忙于他们的项目并且知道这些代码将来会派上用场，我想在指定的地方和上面的图像上显示一个字体真棒图标悬停，显示某些数据。我想将图标fa-info-circle打印到图像上，我希望它是白色的，当它悬停时，消息框会在显示信息时消失。

http://serverlauncherplus.co.uk/maths

我想在地图图像的不同位置显示许多这些图标。

我目前的代码：

<section id="map" class="">
  <div class="container">

    <header>
      <h2 class="space">Map</h2>
    </header>

    <div class="mapImage">
      <img src="mapImg.jpg" alt="map" >
      <a href="#"><span class="fa fa-info-circle"></span></a> <!-- NEED THIS ON THE IMAGE MULTIPLE TIMES AND MULTIPLE PLACES -->
    </div>

    <ul>
      <li><a href="#"><i class="fa fa-info-circle" style="color:white"></i></a></li>
    </ul>
  </div>
</section>

Answer 1

使用绝对定位。简单地说，如果你试试这个CSS：

.mapImage {
    position: relative;
    display: inline-block; /*Just for example, so this div is the same size as the image */
}

.pin {
    position: absolute; /* Takes this element out the document flow */
    z-index:10; /* Just in case of z-index issues, remove if not needed */
}

.pin1 {
    left: 50px; /* Move pin1 50px left */
    top: 100px; /* Move pin1 100px down */
}

.pin2 {
    left: 350px; /* Move pin2 350px left */
    top: 30px; /* Move pin2 30px down */
}

然后这个HTML：

<div class="mapImage">
    <img src="mapImg.jpg" alt="map" >
    <a class="pin pin1" href="#"><span class="fa fa-info-circle"></span></a>
    <a class="pin pin2" href="#"><span class="fa fa-info-circle"></span></a>
</div>

.pin声明在那里，所以你不要在个别声明中添加绝对位置。然后，您需要做的就是更改左侧和顶部（或右侧和底部）属性以定位标记。

这只是用于图标 - 用于在悬停时弹出消息，试一试，看看你是如何进行的。如果您需要帮助，请告诉我。

如果您不理解它，请阅读此信息（这将有助于弹出消息），或者在此处询问，我将很乐意为您提供帮助：）

http://alistapart.com/article/css-positioning-101

好运好友！

编辑：我甚至为您创建了一个CodePen :) http://codepen.io/AshboDev/pen/OXgEQZ

将字体真棒图标放置在特定位置的图像上

1 个答案: