查看“模板:Moe-hover/doc”的源代码

该模板是原始的封装模板，只用于实现hover逻辑，不参与样式表现，绝大多数实现需要二次封装。

参数说明：
*css：容器表现样式。
*hover1：子容器1的内容。
**css1：子容器1的表现样式。
**hb：子容器1在hover前的【显示类型】。
**onhb：子容器1在hover后的【显示类型】。
*hover2：子容器2的内容。
**css2：子容器2的表现样式。
**ha：子容器2在hover前的【显示类型】。
**onha：子容器2在hover后的【显示类型】。
特殊参数：
*fadeIn：仅在onha和onhb内有效，元素将会变成不透明，默认过渡时间是1秒。
*fadeOut：仅在onha和onhb内有效，元素将会变为透明，默认过渡时间是1秒。
*fade-fast：调整过渡时间为0.3秒。
*fade-slow：调整过渡时间为2秒。
关于上述显示类型的说明：
*block：块元素，通常这会撑满整行。
*inine-block：内联块元素，通常会占据一定的高度和宽度。
'''例子'''：
<pre>
<!-- 这是基础样式 -->
{{Moe-hover
|css=display:inline-block;
|hover1=[[file:Wynn_the_Wind_Charmer.jpg|100px]]
|hover2=[[file:Eria_The_Water_Charmer.jpg|100px]]
}}
<!-- 这里没有定位 -->
{{Moe-hover
|css=display:inline-block;
|hb=inline-block|onhb=fadeOut
|ha=inline-block|onha=inline-block onhover-fadeIn onhover-fade-slow
|hover1=[[file:Wynn_the_Wind_Charmer.jpg|100px]]
|hover2=[[file:Eria_The_Water_Charmer.jpg|100px]]
}}
<!-- 这是利用margin做的定位，inline-block在不同浏览器之间间距是有差异的 -->
<!-- 父级容器的font-size可以消除间距，但会造成元素同行元素不统一的问题，会出现高低差 -->
{{Moe-hover
|css=display:inline-block;
|css2=margin-left:-105px;<!-- 移动的距离相当于hover1元素的宽度+间距 -->
|hb=inline-block|onhb=fadeOut
|ha=inline-block|onha=inline-block onhover-fadeIn onhover-fade-slow
|hover1=[[file:Wynn_the_Wind_Charmer.jpg|100px]]
|hover2=[[file:Eria_The_Water_Charmer.jpg|100px]]
}}
<!-- 这是利用position做的定位 -->
{{Moe-hover
|css=display:inline-block;position:relative;
|css2=position:absolute;left:0;top:0;
|hb=inline-block|onhb=fadeOut
|ha=inline-block|onha=inline-block onhover-fadeIn onhover-fade-slow
|hover1=[[file:Wynn_the_Wind_Charmer.jpg|100px]]
|hover2=[[file:Eria_The_Water_Charmer.jpg|100px]]
}}
</pre>
{{Moe-hover
|css=display:inline-block;
|hover1=[[file:Wynn_the_Wind_Charmer.jpg|100px]]
|hover2=[[file:Eria_The_Water_Charmer.jpg|100px]]
}}
{{Moe-hover
|css=display:inline-block;
|hb=inline-block|onhb=fadeOut
|ha=inline-block|onha=inline-block onhover-fadeIn onhover-fade-slow
|hover1=[[file:Wynn_the_Wind_Charmer.jpg|100px]]
|hover2=[[file:Eria_The_Water_Charmer.jpg|100px]]
}}
{{Moe-hover
|css=display:inline-block;
|css2=margin-left:-105px;
|hb=inline-block|onhb=fadeOut
|ha=inline-block|onha=inline-block onhover-fadeIn onhover-fade-slow
|hover1=[[file:Wynn_the_Wind_Charmer.jpg|100px]]
|hover2=[[file:Eria_The_Water_Charmer.jpg|100px]]
}}
{{Moe-hover
|css=display:inline-block;position:relative;
|css2=position:absolute;left:0;top:0;
|hb=inline-block|onhb=fadeOut
|ha=inline-block|onha=inline-block onhover-fadeIn onhover-fade-slow
|hover1=[[file:Wynn_the_Wind_Charmer.jpg|100px]]
|hover2=[[file:Eria_The_Water_Charmer.jpg|100px]]
}}
'''文字行内显示指南'''：

最好用的方法应该是用<code><nowiki><poem>...</poem></nowiki></code>包裹起来。
<pre>
<poem>
AAA{{Moe-hover|hover1=中文中文|hover2=测试测试}}DDD
AAA{{Moe-hover|hover1=中文中文|hover2=测试测试}}DDD

AAA{{Moe-hover|hover1=中文中文|hover2=测试测试}}DDD
</poem>
</pre>
效果：
<poem>
AAA{{Moe-hover|hover1=中文中文|hover2=测试测试}}DDD
AAA{{Moe-hover|hover1=中文中文|hover2=测试测试}}DDD

AAA{{Moe-hover|hover1=中文中文|hover2=测试测试}}DDD
</poem>
<includeonly>[[Category:元模板]]</includeonly>
<noinclude>[[Category:模板文档]]</noinclude>