如何使空白区域显示文本？

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/

如果需要单击某个特定区域，而不是悬停，则可以在CSS中使用JavaScript或:active伪类。

Answer 2

理想情况下，您有不同的某个类的hotspot div和不同的ids。当您在hotSpot类上悬停时，跟踪您在上面悬停的id，然后显示与该id对应的div。该div包含可单击元素。

下面是一个关于如何做到这一点的实时代码示例-->https://sudonow.com/session/525cb5dc35e089113700000d。我可以通过聊天/实时代码编辑来引导你完成它。