仍在学习在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楼 票数:2

通常使用一些简单的Javascript完成此操作。 它的文档记录非常详尽,简单的搜索即可为您提供帮助进行设置所需的所有信息。

但是,您说过您想在纯CSS中做到这一点(这可能就是我要做的)。

看看我在这里创建的这个例子

基本上,您可以将悬停文本添加为​​另一个元素(在本例中为p )内的span元素,如下所示:

<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中的内容。

这应该有助于您指出正确的方向。

  ask by Kirbyarm translate from so

未解决问题?本站智能推荐:

3回复

HTML和CSS-快捷方式URL

我想知道如何在html和CSS中创建快捷方式URL(如果可能) 我的意思是: 这可能吗? 谢谢您的回答。 所以它不能这样工作吗? 有什么选择吗?
1回复

HTML/CSS-具有视差效果的图像覆盖图像

我正在 WordPress 网站上工作,我正在尝试在主图像上添加图像。 我需要将徽标放在背景图像的中心。 现在是水平居中但不是垂直居中。 使用页面构建器、siteorigin 产品,我添加了一个自定义 HTML 小部件。 为了获得我需要的东西,我添加了以下代码: .logo { height
1回复

HTML/CSS-不再悬停时保持悬停效果

我刚刚开始学习HTML / CSS,正在从事一个项目进行练习。 我在显示图像的导航栏上具有悬停效果。 营养和社交都有下拉菜单。 当我将鼠标悬停在下拉菜单上的元素上时,“营养”和“社交”这两个词显然会再次出现。 即使不再将鼠标悬停在它们上,如何保持悬停效果? 可能吗? 我可以使用条
1回复

html/css-创建自扩展动态div

我有样本div结构: 外部div具有固定宽度。 内部div是动态生成的,因此每行可能有1,2,3等div。 是否可以根据每行的数量调整(可能在明确的CSS?)内部div? 因此,在示例中,第一行div的宽度为200px,第二行的宽度为300px。
5回复

HTML/CSS-创建横幅/标题

我有一个水平图像作为GIF和JPG。 这是我用Paint制作的东西 - 一个带有固体背景图像的文字标识。 我在尝试将其显示为横幅/标题时遇到了很多麻烦。 到目前为止,我只能得到坚实的背景才能出现。 文字/徽标神秘地消失了。 坚实的背景在我的背景图像上延伸到全屏,我想要,但很明显,我
5回复

CSS-缓慢悬停效果

我正在创建一个CSS动态菜单,并希望延迟悬停操作。 菜单在悬停在其链接上时的反应是提供子菜单(下拉菜单)。 我想减慢下拉过程,以便子菜单不会立即出现,但需要1秒才能下拉。 非常感谢帮助。 代码如下: 提前致谢 :) 问候, 约瑟夫
3回复

HTML和CSS-不会显示background-image:url

这是html,例如: 这是CSS: 目录结构(从我桌面上的名为site的文件夹开始) site.html styles.css /images/topleft.png 注意:否则将从CSS文件填充样式。 我尝试了文件的绝对路径: 如果我将该网址直接放在浏览器中,则
3回复

HTML/CSS-样式或

我只是想知道这样做是否是个好主意。 例如,如果要使用CSS创建圆角标签,则需要这样的结构: 然后将左标签的背景一角放在link标签上,将右标签放在span标签上(也许是一个不好的例子,因为您可以使用list标签来避免span,但我的意思是:)。 那么,如果我使用<b>而不是