サイトマップの特定の領域にカーソルを移動すると、コンテンツ領域の下部にコンテンツ領域が表示される

Question

私は画像領域にマウスを移動する方法を検討しています（私の場合、画像はライブラリのサイトマップです）。その領域のコンテンツ領域が画像の下に表示されます。これまでは、画像を保持するdivを作成し、地図の各領域ごとにdivを作成しました。次に、情報を扱う独立したdivを作成しました。私は必要な領域に画像上の領域のdivを整列させることができましたが、コンテンツ情報を画像の下部に表示させるためにjqueryを理解することはできません。シンプルな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

チェックはホバー上/非表示を表示します。私はショー-ことのdivのidとして、すべてのホバー可能なdiv要素に

すべてホバリング可能なのdivのために、変化の下

$('.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>

を追加 data-id属性を

1. 追加title共通クラスを行っています