Erstellen eines Inhaltsbereichs am unteren Rand des Inhaltsbereichs, wenn Sie den Mauszeiger über einen bestimmten Bereich einer Sitemap bewegen

Question

Ich habe daran gearbeitet, den Mauszeiger über einen Bereich eines Bildes zu bewegen (in meinem Fall ist das Bild eine Sitemap einer Bibliothek) dann erscheint ein Inhaltsbereich über diesem Bereich unter dem Bild. Bis jetzt habe ich ein div erstellt, um das Bild zu halten und divs für jeden Bereich der Map gemacht, ich habe dann separate divs erstellt, die die Informationen enthalten. Ich konnte die divs der Bereiche auf dem Bild zu den Bereichen ausrichten, die ich brauche, aber ich bin nicht in der Lage, die jQuery herauszufinden, um die Inhaltsinformationen am unteren Rand des Bildes erscheinen zu lassen.

.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

prüfen unten Snippet für einfache Jquery zum Anzeigen/Verbergen auf schweben. Ich habe folgende Änderungen vorgenommen,

1. Added title gemeinsame Klasse für alle Hover-able divs
2. Added data-id Attribut für alle Hover-able divs als Show-able divs 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>