2023年政策修订增补工作正在进行中,欢迎参与!
模板:Moe-hover
跳至導覽
跳至搜尋
該模板是原始的封裝模板,只用於實現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>
效果:
AAADDD
AAADDD
DDD
中文中文
測試測試
AAA
中文中文
測試測試
中文中文
測試測試