好吧，伙计们，我在实习时遇到了麻烦。即使是我的计算机理论教授，他是 Wolfram Alpha 的前系主任，也没有真正给我任何有用的信息。看来我必须在您的指导下着手构建这组网页，因为我在其他地方找不到任何有用的网站。
我正在整理页面，解释我们已集成到类环境中的不同技术。我想使用 CSS 图片库，kind of like this ，从某种意义上说，当您将鼠标悬停在一张图片上时，会弹出一张更大的图片。
但是，我希望它能够在 iframe 中换出图像和随附的文本和链接。 Here's an illustration of what I mean.当鼠标悬停在左侧画廊中的一张图片上时，我希望图像、其下方的文本以及其左侧文本框中的信息发生变化。我的想法是在 iframe 中呈现所有必要的信息，这样您就可以在一个地方获得与该技术相关的所有信息。
“讲台组件”下的框将是 iframe。我知道图像的交换可以通过 CSS 完成，因为我使用它为我的 Web 开发类(class)构建了一个网站(Wolfram Alpha 老师:D)
如果可能的话，我想避免使用 Java 或 JavaScript，而坚持使用纯 CSS。我们为网站使用的 CMS 是 Drupal，所以事情已经相当复杂了。将 JavaScript 混入其中只会让事情变得太古怪。
作为补充说明，我在处理元素时总是对使用 StackOverflow 感到内疚。感觉就像我在作弊:/。因此，如果您能将我指向教程或告诉我可以帮助我到达目的地的搜索词，我将不胜感激。帮我自学，让我更有市场？ :D 提前致谢，伙计们!
最佳答案
如果你真的想在没有 javascript 的情况下做到这一点(我不认为现在有什么古怪的东西)你可以把你的“讲台组件”放在不可见的 <div> 中元素并将它们放在左侧画廊中的每个元素中。有点像这样:
<ul id="gallery">
<li id="item1">
Left-hand item 1
<div class="hidden-data">
Your podium component's content here
</div>
</li>
<li id="item2">
Left-hand item 2
<div class="hidden-data">
Another podium component
</div>
</li>
</ul>
现在您可以创建一个 :hover列表项的样式，使它们仅在鼠标悬停在其上时可见。你不需要 <iframe>对于此解决方案，我认为它会更优化，除非您的左侧画廊中有大量元素。
可以通过设置它们的 position 来将讲台组件放置在您想要的右侧位置。作为absolute .我会留给您找出它们是如何工作的(提示:您需要将父元素设置为 position: relative - 但不仅仅是任何父元素，明智地选择!):)
编辑:Here如果你想看到它的实际效果，这是一个剧透。
关于html - 使用 CSS 交换图像和文本(包括图片)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10518580/