模板:PicHover/doc

本模板用于图片的hover切换效果，使用了widget:Hover。

注意

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

参数与实例

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

参数列表

参数名	是否必须	参数样式	参数示例	参数作用
pic	是	xxx.png【站内图片】	ZhMoegirl15.2.png	设置鼠标未放置于其上时显示的图片
		http://xxx/xxx.png 或者 https://xxx/xxx.jpg…	https://img.moegirl.org.cn/common/2/21/ZhMoegirl15.2.png
hover		xxx.png【站内图片】	Zh2014 moegirlpedia logo.png	设置鼠标放置于其上时显示出的图片
		http://xxx/xxx.png …	https://img.moegirl.org.cn/common/f/fd/Zh2014_moegirlpedia_logo.png
width	否，默认为空	xxx【数字】	150	设置显示的图片宽度
height				设置显示的图片高度
float	否，默认为none	left / right		让图片浮动起来~
text	否，默认为空	【任意文字】	MoegirlPedia	添加一个边框以及带有【text】内容的标题框
link		【任意页面名】	User:萌百娘	使得内链图片能够链接到萌百页面

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

{{PicHover|pic=ZhMoegirl15.2.png|hover=Zh2014 moegirlpedia logo.png}} //最简
{{PicHover
|pic=https://img.moegirl.org.cn/common/2/21/ZhMoegirl15.2.png
|hover=https://img.moegirl.org.cn/common/f/fd/Zh2014_moegirlpedia_logo.png
|width=150
|height=180
|float=right
|text=MoegirlPedia
|link=萌百娘
}} //最多

显示效果：

<img src="ZhMoegirl15.2.png" style="width:px;" />

<img src="Zh2014 moegirlpedia logo.png" style="width:px;" />

{{#widget:Hover}}

<img src="" style="width:150px;" class="thumbimage"/>

<img src="" style="width:150px;" class="thumbimage"/>

MoegirlPedia

{{#widget:Hover}}