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

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 或 CSS 中的 :active 伪类。