置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

模板: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