Question

仍在学习在wiki网页上写文章的绳索，我一直在寻找两天的方法来重现这种效果我知道是可能的，因为这个URL显示它在使用相同引擎的网站上运行，这是Gamepedia。

以下是我试图复制效果的链接。

http://minecraft.gamepedia.com/Iron_sword

现在有一个屏幕截图，显示了我希望完成的内容。这种效果可以访问我放置在任何表格中的任何图像，以这种类似的方式悬停和显示信息。

https://www.dropbox.com/s/189ms6xsl44orhv/demonstration.png?dl=0

我真的不知道从哪里开始。我可以访问CSS文章。任何帮助将非常感激。谢谢你的时间。

此示例中包含模板和CSS媒体wiki页面的更多有用链接：

http://minecraft.gamepedia.com/Template:Item
http://minecraft.gamepedia.com/Template:Grid
http://minecraft.gamepedia.com/MediaWiki:Hydra.css
http://minecraft.gamepedia.com/MediaWiki:Common.css

编辑：我仍然不能100％确定它是如何做到的，但它必须是可能的，因为它是在同一个引擎上。它似乎是一个鼠标悬停，使用自定义颜色选择显示带有边框背景的自定义字体系列。它甚至可以具有多种颜色的文本，并且如果需要，显示的窗口背景可以显着更大。我不希望在Wiki上运行整个Grid或Item模板，我希望自愿改进，我只是想帮助我学习如何使用鼠标悬停技术。

我已经为功能示例提供了上面涉及的样式表，并且礼貌地请求帮助学习我可以将其带到其他Gamepedia Wiki的代码，以获得我所追求的精确效果，而不是整个模板。我一直试图解决这个问题几天，我联系过的任何人都没有能够帮助解决这个问题，因为它必须比我想象的要复杂得多。必须有一个天才，谁知道这个场景的确切内部，请帮忙！

编辑引擎属性：不能使用：Javascript 可以使用：CSS 可以使用：一些HTML

Answer 1

这通常使用一些简单的Javascript完成。它有很好的文档记录，简单的搜索将为您提供帮助设置所需的所有信息。

但是，你说你想在纯CSS中做这件事（这可能是我要做的）。

查看此example I created here。

基本上，您可以将悬停文本作为span元素添加到另一个元素（在本例中为p）中，如下所示：

<p>Hover here.<span>Some text appears!</span></p>

然后，为此span元素定义样式，设置relative position，并在页面最初加载时隐藏元素：

span {
    background: black;
    color: white;
    position: relative;
    top: -10px;
    /* Change the relative positioning of the overlay*/
    left: 20px;
    display: none;
    padding: 5px;
}

然后，只需在悬停时显示：

p:hover span {
    display: block;
}

您可以将此实现与您提供的链接示例类似。例如，可以找到像素字体并以该字体呈现span中的内容。

这有助于指明你正确的方向。

引擎限制HTML和CSS - 如何从此URL创建此效果？

1 个答案: