模板:Hover

模板文档  

这个文档嵌入自Template:Hover/doc。

本模板用于图片以外的hover切换效果（比如文字，css自绘图形），但也可以应用到图片。使用了widget:Hover。

注意

使用本模板时请检查移动端有无显示问题。如果不知道如何解决移动端的显示问题，可以尝试替换为{{TextHover}}模板。

参数与实例

一共有15个参数，其中有两个是必须的。

参数列表

参数名	是否必须	参数样式	参数示例	参数作用
before	是	任意	你看得到我	设置鼠标未放置于其上时显示的字符等
after		任意	现在你看不到	设置鼠标放置于其上时显示出的字符等
width	否，默认为最大需要的大小	数字(+单位)	150 10em	设置显示的字符等的宽度，不加单位时默认为px
height				设置显示的字符等高度，不加单位时默认为px
float	否，默认为none	left / right		让hover块浮动起来~
hp	否，不指定则不更改任何内容	relative/absolute/static/fixed		控制 hover 类的 position 属性 (HoverPositionOverride)
dis	否，不指定则不更改任何内容	inline-block/block		控制 hover 类的 display 属性 (HoverDisplayOverride)
hb	否，不指定则不更改任何内容	none/inline-block/block		控制 hoverbefore 类的 display 属性 (HoverBeforeDisplay)
ha	否，不指定则不更改任何内容	none/inline-block/block		控制 hoverafter 类的 display 属性 (HoverAfterDisplay)
onhb	否，不指定则不更改任何内容	none/inline-block/block		控制 hoverbefore 类的 display 属性 (鼠标放置时) (HoverBeforeDisplayOnHover)
onha	否，不指定则不更改任何内容	none/inline-block/block		控制 hoverafter 类的 display 属性 (鼠标放置时) (HoverAfterDisplayOnHover)
css	否，不指定则不更改任何内容	自定义		自定义样式
cssb	否，不指定则不更改任何内容			自定义样式 (hoverbefore 类)
cssa	否，不指定则不更改任何内容			自定义样式 (hoverafter 类)

备注: 如果使用了参数 onhb 和 onha，则只有鼠标在 hoverbefore 上时 hoverafter 才会出现。

于是完整的代码实例如下：

对于图片：

与{{PicHover}}类似，但是图片需要直接填链接。

{{Hover|before=[[File:ZhMoegirl15.2.png|link=]]|after=[[File:Zh2014 moegirlpedia logo.png|link=]]|width=150|height=180}}

显示效果：

对于文字：

直接调用：

{{Hover|before={{color|blue|你看得到我}}|after={{color|red|现在你看不到}}}}

显示效果：

你看得到我

现在你看不到

行/段落内文字显示指南：

建议使用{{HoverInline}}模板

• 需要使用html标签括起来，div、span都可以，星号、半角冒号等缩进方式也自带标签。

正文里最简单的方法应该是将整个段落用<poem>...</poem>包裹起来。

• 设置display参数为inline-block。
• 设置比较长的元素的CSS，加上position:relative;。

<poem>
哈哈哈{{Hover|display=inline-block|before={{color|blue|你看得到我}}|cssa=position: relative;|after={{color|red|现在你看不到}}}}吗？！
</poem>
*哈哈哈{{Hover|display=inline-block|before={{color|blue|你看得到我}}|cssa=position: relative;|after={{color|red|现在你看不到}}}}吗？！

效果：

哈哈哈

你看得到我

现在你看不到

吗？！

• 哈哈哈
  你看得到我

  现在你看不到
  吗？！

对于自选图形

与文字类似，不再一一赘述。

显示效果：

相关模板

{{Moe-hover}}

{{Hovers}}