我一直在研究如何将鼠标悬停在图像的某个区域(在我的情况下,该图像是图书馆的站点地图),然后在该图像的下方出现一个关于该区域的内容区域。到目前为止,我已经创建了一个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>

最佳答案

检查以下代码段以获取简单的jquery以在悬停时显示/隐藏。我做了以下更改,


为所有可悬停的div添加了title通用类
向所有可悬停的div添加data-id属性作为可显示的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>

关于jquery - 悬停在站点地图的特定区域上时,使内容区域显示在内容区域的底部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46563784/

10-09 19:02
查看更多