如何使空白區域可點擊以顯示文本？

Question

我幾個小時一直在琢磨着我的大腦，並沒有找到解決方案。我有一個特定的圖像區域，當用戶翻轉它時，我想讓一些文字出現在用戶翻轉的地方。

我可能會談論這一切錯誤，我不知道。我目前有一個大圖像，上面有五個圖像映射熱點。在每個地點，當用戶滾過該地區時，我想要顯示與該地區在熱點上顯示的內容相關的文字。此時，熱點和文本應該是可點擊的，以使用戶訪問特定頁面。

我試過讓文字隱藏，然後在滾動時出現。但是你不能翻轉隱藏文字。我試圖通過允許div被翻轉和文本出現在那個點上來解決這個問題，但是我也無法讓它工作。我想要一個CSS解決方案，但我並不反對使用JQuery或JavaScript。感謝您提供任何幫助。

更新 - 我現在有腳本工作。感謝CuriousSloth對JSFiddle的支持。我花了一點時間纔將它融入到我所擁有的內容中，但它很有效。任何人都可以去查看什麼，我在我的投資組合網站的首頁說起：再次http://www.taranwilson.com

感謝所有幫助球員。

Answer 1

CSS

.area { 
    opacity: 0; 
} 

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

沒有JS：http://jsfiddle.net/pAmm4/1/

如果你需要一個特定的區域被點擊，不叮無縫的，你可以使用JavaScript或：active僞類CSS。

Answer 2

理想情況下，你有不同的熱點divs的某一類和不同的id。 當您將鼠標懸停在hotSpot類上時，請跟蹤您懸停的id，然後顯示與該id對應的div。該div包含您的可點擊元素。

以下是您可能如何執行此操作的實時代碼示例 - >https://sudonow.com/session/525cb5dc35e089113700000d。 我可以通過聊天/實時代碼編輯來引導你。