사이트 맵의 특정 영역 위로 마우스를 가져 가면 콘텐츠 영역의 하단에 콘텐츠 영역이 나타나게합니다.

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에 대한

1. 추가 title에게, 변화보다 일반적인 클래스를했을
2. 추가 data-id 쇼 - 수 DIV의 ID로 모든 마우스 오버 할 수있는 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>