當將鼠標懸停在站點地圖的特定區域時，使內容區域出現在內容區域的底部

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>