該模板是原始的封裝模板,只用於實現hover邏輯,不參與樣式表現,絕大多數實現需要二次封裝。
參數說明:
特殊參數:
關於上述顯示類型的說明:
例子:
<!-- 這是基礎樣式 -->
{{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]]
}}
文字行內顯示指南:
最好用的方法應該是用<poem>...</poem>包裹起來。
<poem>
AAA{{Moe-hover|hover1=中文中文|hover2=測試測試}}DDD
AAA{{Moe-hover|hover1=中文中文|hover2=測試測試}}DDD
AAA{{Moe-hover|hover1=中文中文|hover2=測試測試}}DDD
</poem>
效果: