当将鼠标悬停在站点地图的特定区域时，使内容区域出现在内容区域的底部

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. 新增title通用类所有悬停能力的div
2. 新增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>