本网站正在建设中(~ ̄▽ ̄)~

  • 你好~!欢迎来到中文歌声合成个人收集站-VCPedia.cn!
  • 若发现页面信息有误投稿至本站,请联系管理员。

模板: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:內聯塊元素,通常會占據一定的高度和寬度。

例子

<!-- 这是基础样式 -->
{{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>

效果:

AAA
中文中文
測試測試
DDD
AAA
中文中文
測試測試
DDD


AAA
中文中文
測試測試
DDD