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