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

Question

我已经为此绞尽脑汁好几个小时了，在网上搜遍了没有解决办法。我有一个图像的特定区域，当用户滚动它时，我希望在用户滚动的位置出现一些文本。

我可能做错了这一切，我不知道。我目前有一个大图像，上面有五个图像映射热点。在每个位置，当用户在该区域上滚动时，我希望与该区域相关的文本出现在热点上。此时，热点和文本应该是可点击的，以将用户带到特定页面。

我试过隐藏文本，然后在翻转时出现。但是您不能翻转隐藏的文本。我试图通过允许 div 翻转并且文本出现在那个点来解决这个问题，但我也无法让它工作。我想要一个 CSS 解决方案，但我不反对使用 JQuery 或 JavaScript。感谢您提供的任何帮助。

更新- 我现在有脚本工作。感谢 CuriousSloth 为您在 JSFiddle 上所做的贡献。我花了一点时间将它融入我所拥有的东西中，但它奏效了。任何人都可以在我的投资组合网站的主页上查看我所说的内容：http ://www.taranwilson.com

再次感谢所有帮助的家伙。

score 1 · Accepted Answer

CSS

.area {
   opacity: 0;
}

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

如果您需要特定区域可点击而不是悬停，您可以使用 JavaScript 或 CSS 中的 :active 伪类。

score 0 · Accepted Answer

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

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

2 回答 2