2023年政策修订增补工作正在进行中,欢迎参与!
  • Moegirl.ICU:萌娘百科流亡社群 581077156(QQ),欢迎对萌娘百科运营感到失望的编辑者加入
  • Moegirl.ICU:账号认领正在试运行,有意者请参照账号认领流程

模板:Moe-hover

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋
Template-info.svg 模板文檔  [查看] [編輯] [歷史] [刷新]

該模板是原始的封裝模板,只用於實現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]]
}}
Wynn the Wind Charmer.jpg
Eria The Water Charmer.jpg
Wynn the Wind Charmer.jpg
Eria The Water Charmer.jpg
Wynn the Wind Charmer.jpg
Eria The Water Charmer.jpg
Wynn the Wind Charmer.jpg
Eria The Water Charmer.jpg

文字行內顯示指南

最好用的方法應該是用<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