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

我仍然在学习在维基网页上写文章的诀窍，我已经搜索了两天，寻找复制这种效果的方法，我知道这是可能的，因为这个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%确定它是如何做到这一点的，但它必须是可能的，因为它是在同一个引擎。它似乎是一个鼠标悬停，使用自定义颜色选择显示带有边框背景的自定义字体系列。它甚至可以有多种颜色的文本，如果需要，显示的窗口背景可以大得多。我不想让整个网格或项目模板在维基上运行，我希望自愿改进，我只是想得到一些帮助，学习如何使用鼠标悬停技术

我已经为函数示例提供了上面所涉及的样式表，并礼貌地请求帮助学习我可以从中为其他Gamepedia Wiki带来什么代码，以获得我想要的确切效果，而不是整个模板。这几天来，我一直在努力解决这个问题，但我联系的任何人都没能帮上忙，因为事情肯定比我想象的要复杂。一定有一个天才知道这个场景的确切内涵，请帮助

编辑引擎属性： 无法使用：Javascript 可以使用：CSS

---

可以使用：一些HTML

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

但是，你说你想在纯CSS中实现这一点（这可能就是我要做的）

看看这个

基本上，您可以将悬停文本作为

span

元素添加到另一个元素中（在本例中为

p

），如下所示：

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

然后，只需将其悬停显示：

p:hover span {
    display: block;
}

您可以使此实现与您提供的链接示例类似。例如，可以找到一种像素字体，并以该字体呈现

span

中的内容

---

这将有助于为您指明正确的方向。

搜索“jQuery工具提示”，该提示将为您指明方向。另外，在发布更详细的帖子并提供代码时。我已经对jQuery工具提示进行了一些研究，它正在引导我找到一些目前我无法掌握的信息，好心的先生。如果你将这些信息注入某种网站，你应该为所有东西分配ID，否则它将与网站的当前布局冲突并破坏它。这是一个非常简单的CSS概念，我建议你研究一下。它将变成类似于

#hover item{}

和

#hover item:hover{}

的东西。我在#hover item span{}和#hover item p:hover{}中有代码，对于（p）（span）结果，我在这里得到hover。出现了一些文本！没有任何悬停效果。好的一面是，我刚才提供的代码似乎没有破坏网站，这是伟大的。

p:hover span {
    display: block;
}