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

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

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

==参数与实例==
一共有15个参数，其中有两个是必须的。
{| 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)
|-
| css || 否，不指定则不更改任何内容 || colspan=2 rowspan=3 | 自定義 || 自定義樣式
|-
| cssb || 否，不指定则不更改任何内容 || 自定義樣式 (hoverbefore 类)
|-
| cssa || 否，不指定则不更改任何内容 || 自定義樣式 (hoverafter 类)
|-
|}

'''备注''': 如果使用了参数 <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|现在你看不到}}}}

;行/段落内文字显示指南：
'''建议使用{{tl|HoverInline}}模板'''
*需要使用html标签括起来，div、span都可以，星号、半角冒号等缩进方式也自带标签。
:正文里最简单的方法应该是将整个段落用<code><nowiki><poem>...</poem></nowiki></code>包裹起来。
*设置display参数为inline-block。
*设置比较长的元素的CSS，加上<code>position:relative;</code>。
<pre>
<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|现在你看不到}}}}吗？！
</pre>
效果：
<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|现在你看不到}}}}吗？！

'''对于自选图形'''
:与文字类似，不再一一赘述。
显示效果：
{{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>
}}

== 相关模板 ==
{{tl|Moe-hover}}

{{tl|Hovers}}<noinclude>[[Category:模板文档]]</noinclude>