텍스트를 표시하기 위해 빈 영역을 클릭 할 수있게하려면 어떻게해야합니까?

Question

나는 이것을 몇 시간 동안 두뇌를 풀고 해결책없이 그물을 닦았다. 나는 사용자가 롤오버 할 때, 사용자가 굴러 다니는 곳에 나타날 텍스트를 가지기를 원하는 특정 이미지 영역을 가지고있다.

나는이 모든 잘못에 대해 갈 수 있습니다, 나도 몰라. 현재 5 개의 이미지에 핫 스폿이 매핑 된 큰 이미지가 있습니다. 각 지점에서 사용자가 해당 지역을 굴러 갈 때 해당 지역이 핫스팟 위에 표시되는 것과 관련된 텍스트를 원합니다. 이 시점에서 핫 스폿과 텍스트를 클릭하여 특정 페이지로 이동시켜야합니다.

텍스트가 숨겨져있는 상태에서 표시하려고 시도했습니다. 그러나 숨겨진 텍스트를 뒤집을 수는 없습니다. div를 롤오버하도록 허용하고 그 시점에 텍스트가 표시되도록 수정하려고했지만 그 중 하나를 작동시키지 못했습니다. 나는 CSS 솔루션을 원하지만 JQuery 나 JavaScript를 사용하는 것에 반대하지 않는다. 부여 할 수있는 도움에 감사드립니다.

업데이트 - 이제 스크립트가 작동합니다. CuriousSloth를 JSFiddle에 올려 주셔서 감사합니다. 내가 가지고있는 것에 그것을 통합하는 데 약간 시간이 걸렸지 만 효과가있었습니다. 누구든지 내 포트폴리오 사이트의 홈페이지에서 내가 말하는 내용을 볼 수 있습니다. http://www.taranwilson.com

모든 도움 전문가 들께 다시 한번 감사드립니다.

Answer 1

CSS JS없이

.area { 
    opacity: 0; 
} 

.area:hover { 
    opacity: 1; 
    transition: opacity 0.5s ease-in-out; 
} 

: 당신이 클릭 할 수있는 특정 지역을해야하는 경우 http://jsfiddle.net/pAmm4/1/

가, 가져가되지 자바 스크립트 또는 하나를 사용할 수 있습니다 CSS에 적극적으로 의사 클래스입니다.

Answer 2

이상적으로 특정 클래스와 다른 ID의 다른 핫스팟 div가 있습니다. hotSpot 클래스 위로 마우스를 가져 가면 위에 올려 놓은 ID를 추적하고 해당 ID에 해당하는 div를 표시합니다. 해당 div에는 클릭 가능한 요소가 포함되어 있습니다.

여기에 어떻게 수행 할 수 있는지에 대한 라이브 코드 샘플 ->https://sudonow.com/session/525cb5dc35e089113700000d이 있습니다. 채팅/라이브 코드 수정을 통해 안내해 드리겠습니다.