查看“︁模板:Hover/doc”︁的源代码

本模板用于图片以外的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块浮动起来~
<!-- |-
| mode || 否，默认为0 || colspan=2 | 0 / 1 || 展示方式不同_(:зゝ∠)_ --><!-- Shirrak前辈暂时拿掉了mode参数 -->
|-
| 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<!--|mode=1-->}}

'''对于文字：'''
<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>