如何使空白区域可点击以显示文本？

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。 我可以通过聊天/实时代码编辑来引导你。