仍在学习在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
答案 0 :(得分:2)
这通常使用一些简单的Javascript完成。它有很好的文档记录,简单的搜索将为您提供帮助设置所需的所有信息。
但是,你说你想在纯CSS中做这件事(这可能是我要做的)。
基本上,您可以将悬停文本作为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
中的内容。
这有助于指明你正确的方向。