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