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

时间:2015-03-31 13:01:29

标签: html css

仍在学习在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

1 个答案:

答案 0 :(得分:2)

这通常使用一些简单的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中的内容。

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