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

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

理想情况下，您拥有某个类和不同ID的不同热点div。 当您将鼠标悬停在hotSpot类上时，请跟踪您悬停的ID，然后显示与该ID对应的div。该div包含您的可点击元素。

以下是有关如何执行此操作的实时代码示例 - ＆gt; https://sudonow.com/session/525cb5dc35e089113700000d。 我可以通过聊天/实时代码编辑来引导您完成它。