Template:Hover/doc - 版本历史

imported>=海豚=：文本替换 - 替换“
”为“
”

2021-04-18T11:11:32Z

文本替换 - 替换“<br>”为“<br/>”

←上一版本		2021年4月18日 (日) 19:11的版本
第15行：		第15行：
	\| after \|\|任意 \|\| 现在你看不到 \|\| 设置鼠标放置于其上时显示出的字符等		\| after \|\|任意 \|\| 现在你看不到 \|\| 设置鼠标放置于其上时显示出的字符等
	\|-		\|-
	\| width \|\| rowspan="2" \| 否，默认为最大需要的大小 \|\| rowspan="2" \| 数字(+单位) \|\| rowspan="2" \| 150<br>10em \|\| 设置显示的字符等的宽度，不加单位时默认为px		\| width \|\| rowspan="2" \| 否，默认为最大需要的大小 \|\| rowspan="2" \| 数字(+单位) \|\| rowspan="2" \| 150<br/>10em \|\| 设置显示的字符等的宽度，不加单位时默认为px
	\|-		\|-
	\| height \|\| 设置显示的字符等高度，不加单位时默认为px		\| height \|\| 设置显示的字符等高度，不加单位时默认为px

2020年3月28日 (六) 09:55 imported>=海豚=

2020-03-28T09:55:24Z

←上一版本		2020年3月28日 (六) 17:55的版本
第43行：		第43行：
	'''对于图片：'''与{{tl\|PicHover}}类似，但是图片需要直接填链接。		'''对于图片：'''与{{tl\|PicHover}}类似，但是图片需要直接填链接。
	<pre>		<pre>
	{{Hover\|before=[[文件:58185939_1.png\|缩略图]]\|after=[[文件:58185939_3.png\|缩略图]]~~\|width=150\|height=180~~}}		{{Hover\|before=[[文件:58185939_1.png\|缩略图]]\|after=[[文件:58185939_3.png\|缩略图]]}}
	</pre>		</pre>
	显示效果：		显示效果：
	{{Hover\|before=[[文件:58185939_1.png\|缩略图]]\|after=[[文件:58185939_3.png\|缩略图]]~~\|width=150\|height=180<!--\|mode=1-->~~}}		{{Hover\|before=[[文件:58185939_1.png\|缩略图]]\|after=[[文件:58185939_3.png\|缩略图]]}}

	'''对于文字：'''		'''对于文字：'''

2020年3月28日 (六) 09:54 imported>=海豚=

2020-03-28T09:54:01Z

←上一版本		2020年3月28日 (六) 17:54的版本
第43行：		第43行：
	'''对于图片：'''与{{tl\|PicHover}}类似，但是图片需要直接填链接。		'''对于图片：'''与{{tl\|PicHover}}类似，但是图片需要直接填链接。
	<pre>		<pre>
	{{Hover\|before=[[文件:58185939_1.png\|~~link=~~]]\|after=[[文件:~~58185939_2~~.png\|~~link=~~]]\|width=150\|height=180}}		{{Hover\|before=[[文件:58185939_1.png\| 缩略图]]\|after=[[文件:58185939_3.png\| 缩略图]]\|width=150\|height=180}}
	</pre>		</pre>
	显示效果：		显示效果：
	{{Hover\|before=[[文件:58185939_1.png\|~~link=~~]]\|after=[[文件:~~58185939_2~~.png\|~~link=~~]]\|width=150\|height=180<!--\|mode=1-->}}		{{Hover\|before=[[文件:58185939_1.png\| 缩略图]]\|after=[[文件:58185939_3.png\| 缩略图]]\|width=150\|height=180<!--\|mode=1-->}}

	'''对于文字：'''		'''对于文字：'''

2020年3月28日 (六) 09:49 imported>=海豚=

2020-03-28T09:49:28Z

←上一版本		2020年3月28日 (六) 17:49的版本
第46行：		第46行：
	</pre>		</pre>
	显示效果：		显示效果：
	{{Hover\|before=[[~~File~~:~~ZhMoegirl15.2~~.png\|link=]]\|after=[[~~File~~:~~Zh2014 moegirlpedia logo~~.png\|link=]]\|width=150\|height=180<!--\|mode=1-->}}		{{Hover\|before=[[ 文件:58185939_1.png\|link=]]\|after=[[ 文件:58185939_2.png\|link=]]\|width=150\|height=180<!--\|mode=1-->}}

	'''对于文字：'''		'''对于文字：'''

2020年3月28日 (六) 09:48 imported>=海豚=

2020-03-28T09:48:36Z

←上一版本		2020年3月28日 (六) 17:48的版本
第43行：		第43行：
	'''对于图片：'''与{{tl\|PicHover}}类似，但是图片需要直接填链接。		'''对于图片：'''与{{tl\|PicHover}}类似，但是图片需要直接填链接。
	<pre>		<pre>
	{{Hover\|before=[[~~File~~:~~ZhMoegirl15.2~~.png\|link=]]\|after=[[~~File~~:~~Zh2014 moegirlpedia logo~~.png\|link=]]\|width=150\|height=180}}		{{Hover\|before=[[ 文件:58185939_1.png\|link=]]\|after=[[ 文件:58185939_2.png\|link=]]\|width=150\|height=180}}
	</pre>		</pre>
	显示效果：		显示效果：

imported>850710247liu：创建页面，内容为“本模板用于图片以外的hover切换效果（比如文字，css自绘图形），但也可以应用到图片。使用了widget:Hover。 ==参数与实例==…”

2020-03-05T23:45:56Z

创建页面，内容为“本模板用于图片以外的hover切换效果（比如文字，css自绘图形），但也可以应用到图片。使用了widget:Hover。 ==参数与实例==…”

新页面

本模板用于图片以外的hover切换效果（比如文字，css自绘图形），但也可以应用到图片。使用了[[widget:Hover]]。
==参数与实例==
一共有十二个参数，其中有两个是必须的。
{| class="wikitable" style="text-align: center;"
|+参数列表
|-
! 参数名
! 是否必须
! 参数样式
! 参数示例
! 参数作用
|-
| before || rowspan="2" | 是 || 任意 || 你看得到我 || 设置鼠标未放置于其上时显示的字符等
|-
| after ||任意 || 现在你看不到 || 设置鼠标放置于其上时显示出的字符等
|-
| width || rowspan="2" | 否，默认为最大需要的大小 || rowspan="2" | 数字(+单位) || rowspan="2" | 150<br>10em || 设置显示的字符等的宽度，不加单位时默认为px
|-
| height || 设置显示的字符等高度，不加单位时默认为px
|-
| float || 否，默认为none || colspan=2 | left / right || 让hover块浮动起来~

|-
| hp || 否，不指定则不更改任何内容 || colspan=2 | relative/absolute/static/fixed || 控制 hover 类的 position 属性 (HoverPositionOverride)
|-
| dis || 否，不指定则不更改任何内容 || colspan=2 | inline-block/block || 控制 hover 类的 display 属性 (HoverDisplayOverride)
|-
| hb || 否，不指定则不更改任何内容 || colspan=2 | none/inline-block/block || 控制 hoverbefore 类的 display 属性 (HoverBeforeDisplay)
|-
| ha || 否，不指定则不更改任何内容 || colspan=2 | none/inline-block/block || 控制 hoverafter 类的 display 属性 (HoverAfterDisplay)
|-
| onhb || 否，不指定则不更改任何内容 || colspan=2 | none/inline-block/block || 控制 hoverbefore 类的 display 属性 (鼠标放置时) (HoverBeforeDisplayOnHover)
|-
| onha || 否，不指定则不更改任何内容 || colspan=2 | none/inline-block/block || 控制 hoverafter 类的 display 属性 (鼠标放置时) (HoverAfterDisplayOnHover)
|-
|}

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

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

'''对于图片：'''与{{tl|PicHover}}类似，但是图片需要直接填链接。
<pre>
{{Hover|before=[[File:ZhMoegirl15.2.png|link=]]|after=[[File:Zh2014 moegirlpedia logo.png|link=]]|width=150|height=180}}
</pre>
显示效果：
{{Hover|before=[[File:ZhMoegirl15.2.png|link=]]|after=[[File:Zh2014 moegirlpedia logo.png|link=]]|width=150|height=180}}

'''对于文字：'''
<pre>
{{Hover|before={{color|blue|你看得到我}}|after={{color|red|现在你看不到}}}}
</pre>
显示效果：
{{Hover|before={{color|blue|你看得到我}}|after={{color|red|现在你看不到}}}}

'''对于自选图形'''
<pre>
与文字类似，字太多影响阅读我就不写了……
</pre>
显示效果：
{{Hover
|before= <div style="width:40px;height:54px;background-color:#f9f9f9;margin-top:0px;overflow:hidden;border:1px solid #f9f9f9;">
<div style="margin-top:15px;margin-left:5px;display:inline-block;position:relative;left:0;top:0;width:30px;height:30px;">
<div style="background:#6cf; border-radius:50%; width:100%; height:100%;"></div>
<div style="border:30px solid transparent;border-bottom-color:#6cf;border-left-width:15px;border-right-width:15px;position:absolute;top:-45px;"></div>
<div style="border:30px solid transparent;border-left-color:#f9f9f9;border-right-color:#f9f9f9;border-left-width:16px;border-right-width:16px;border-radius:50%;position:absolute;top:-40px;left:-1px;"></div>
<div style="width:18px;height:18px;background-color:#36f;border-radius:50%;position:absolute;left:6px;top:12px;"></div>
<div style="border:18px solid transparent;border-bottom-color:#3366ff;border-left-width:9px;border-right-width:9px;position:absolute;top:-12px;left:6px;"></div>
<div style="border:17px solid transparent;border-left-color:#66ccff;border-right-color:#66ccff;border-left-width:9px;border-right-width:9px;border-radius:50%;position:absolute;top:-8px;left:6px;"></div>
<div style="border:10px solid transparent;border-left-color:#3366ff;border-right-color:#3366ff;border-left-width:5px;border-right-width:5px;border-radius:50%;position:absolute;top:9px;left:10px;"></div>
</div>
</div>
|after=<div style="border:30px solid green;border-left-color:black;border-right-color:black;border-top-width:37.5px;border-bottom-width:37.5px;border-radius:50%;width:15px;"></div>
<div style="position:relative;left:200px;top:-240px;">
</div>
}}
<noinclude>[[分類:模板說明文件]]</noinclude>