0

好吧，伙计们，我在实习时把自己搞砸了。即使是我的计算机理论教授，他是 Wolfram Alpha 的前系主任，也没有真正给我任何有用的信息。看来我必须在您的指导下着手构建这组网页，因为我在其他地方找不到任何有用的网站。

我正在整理页面来解释我们已集成到课堂环境中的不同技术。我想使用类似这样的 CSS 图像库，因为当您将鼠标悬停在图像上时，会弹出一个更大的图像。

但是，我希望它能够在 iframe 中交换图像以及随附的文本和链接。这是我的意思的说明。当鼠标悬停在左侧画廊中的一张图片上时，我希望更改图像、其下方的文本以及其左侧文本框中的信息。我的想法是在 iframe 中呈现所有必要的信息，以便您在一个地方获得与该技术相关的所有信息。

“Podium Components”下的框是 iframe。我知道图像的交换可以通过 CSS 完成，因为我为我的 Web 开发课程建立了一个使用它的网站（Wolfram Alpha 老师：D）

如果可能的话，我想避免使用 Java 或 JavaScript 并坚持使用纯 CSS。我们用于网站的 CMS 是 Drupal，所以事情已经相当复杂了。将 JavaScript 混入其中只会让事情变得太古怪。

作为补充说明，当我处理项目时，我总是对使用 StackOverflow 感到内疚。感觉就像我在作弊：/。因此，如果您能指出我的教程或告诉我搜索字词将带我去我需要去的地方，我将不胜感激。帮我自学，让我更有市场？:D 提前谢谢，伙计们！

4

2 回答 2

1

如果您真的想在没有 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- 但不仅仅是任何父元素，请明智地选择！）:)

编辑：如果您想看到它的实际效果，这里有一个剧透。

于 2012-05-09T15:05:07.527 回答
1

如果您只是为了使用 CSS 而使用 CSS，那么对于 Web 开发的语义而言，这是一种错误的做法。但是为了不做个混蛋，我会尽力帮助的！;)

您可以使用 CSS 属性“内容”来更改 DIV 等中的内容，而无需使用 JavaScript 之类的东西： http ://www.w3schools.com/cssref/pr_gen_content.asp此解决方案的好处是您不会不需要为要更改的内容创建 iframe。

当然，如果您坚持使用 iframe，还有其他解决方案。您还可以在图像的悬停状态上使用 CSS 的伪类来更改 iframe 的显示值。

http://devsnippets.com/article/5-advanced-css-pseudo-class.html

例如，悬停在图像上会放大图像，并同时更改 DIV 的内容。我相信这不应该那么难！

我希望这有一点帮助！

于 2012-05-09T15:05:50.140 回答