将鼠标悬停在站点地图的特定区域上时，将内容区域显示在内容区域的底部

Question

我一直在研究如何将鼠标悬停在图像区域上（在我的情况下，图像是图书馆的站点地图），然后在图像下方显示有关该区域的内容区域。到目前为止，我已经创建了一个div来保存图像并为地图的每个区域创建div，然后我创建了分隔信息的单独div。我已经能够将图像上的区域的div与我需要的区域对齐但是无法找出jquery以使内容信息出现在图像的底部。

.container {
  position: relative;
  text-align: center;
  color: #000;
}

.container img {
  width: 700px;
  height: 400px;
}

.top-left {
  position: absolute;
  top: 200px;
  left: 180px;
}

.top-right {
  position: absolute;
  top: 70px;
  right: 220px;
}

.bottom-right {
  position: absolute;
  bottom: 100px;
  right: 220px;
}

#left,
#topRight,
#centerRight,
#bottomRight {
  display: none;
}

.centered {
  position: absolute;
  top: 50%;
  left: 68%;
  transform: translate(-50%, -50%);
}

<main>
  <div class="container">
    <img src="MelbournePublicLibraryFloorPlan.jpg" alt="Norway">
    <div class="top-left">Top Left</div>
    <div class="top-right">Top Right</div>
    <div class="bottom-right">Bottom Right</div>
    <div class="centered">Centered</div>
  </div>
  <div id="left">
    <p>On the left of the library you will the book shelves.</p>
  </div>
  <div id="topRight">
    <p>In the top right of the library you will find the computer desks.</p>
  </div>
  <div id="centerRight">
    <p>In the center of the library on the right you will find the reading area. Make yourself comfortable and read a good book.</p>
  </div>
  <div id="bottomRight">
    <p>
      In the bottom right corner of the library you will find the service counters, were you will find friendly library staff
    </p>
  </div>
</main>

Answer 1

检查下面的代码片段，以便在悬停时显示/隐藏简单的jquery。我做了以下更改，

1. 为所有可悬停的div添加了title公共类
2. 为所有可悬停的div添加data-id属性作为show-able div的id

$('.title').hover(function() {
  $($(this).data('id')).toggle();
});

.container {
  position: relative;
  text-align: center;
  color: #000;
}

.container img {
  width: 700px;
  height: 400px;
}

.top-left {
  position: absolute;
  top: 200px;
  left: 180px;
}

.top-right {
  position: absolute;
  top: 70px;
  right: 220px;
}

.bottom-right {
  position: absolute;
  bottom: 100px;
  right: 220px;
}

#left,
#topRight,
#centerRight,
#bottomRight {
  display: none;
}

.centered {
  position: absolute;
  top: 50%;
  left: 68%;
  transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <div class="container">
    <img src="MelbournePublicLibraryFloorPlan.jpg" alt="Norway">
    <div class="top-left title" data-id="#left">Top Left</div>
    <div class="top-right title" data-id="#topRight">Top Right</div>
    <div class="bottom-right title" data-id="#centerRight">Bottom Right</div>
    <div class="centered title" data-id="#bottomRight">Centered</div>
  </div>
  <div id="left">
    <p>On the left of the library you will the book shelves.</p>
  </div>
  <div id="topRight">
    <p>In the top right of the library you will find the computer desks.</p>
  </div>
  <div id="centerRight">
    <p>In the center of the library on the right you will find the reading area. Make yourself comfortable and read a good book.</p>
  </div>
  <div id="bottomRight">
    <p>
      In the bottom right corner of the library you will find the service counters, were you will find friendly library staff
    </p>
  </div>
</main>