|
|
| 第41行： |
第41行： |
| 于是完整的代码实例如下： | | 于是完整的代码实例如下： |
|
| |
|
| '''对于图片：'''与{{tl|PicHover}}类似，但是图片需要直接填链接。
| |
| <pre>
| |
| {{Hover|before=[[File:ZhMoegirl15.2.png|link=]]|after=[[File:Zh2014 moegirlpedia logo.png|link=]]|width=150|height=180}}
| |
| </pre>
| |
| 显示效果：
| |
| {{Hover|before=[[File:ZhMoegirl15.2.png|link=]]|after=[[File:Zh2014 moegirlpedia logo.png|link=]]|width=150|height=180<!--|mode=1-->}}
| |
|
| |
|
| '''对于文字：''' | | '''对于文字：''' |
| 第55行： |
第49行： |
| {{Hover|before={{color|blue|你看得到我}}|after={{color|red|现在你看不到}}}} | | {{Hover|before={{color|blue|你看得到我}}|after={{color|red|现在你看不到}}}} |
|
| |
|
| '''对于自选图形'''
| | |
| <pre>
| |
| 与文字类似，字太多影响阅读我就不写了……
| |
| </pre>
| |
| 显示效果：
| |
| {{Hover
| |
| |before= <div style="width:40px;height:54px;background-color:#f9f9f9;margin-top:0px;overflow:hidden;border:1px solid #f9f9f9;">
| |
| <div style="margin-top:15px;margin-left:5px;display:inline-block;position:relative;left:0;top:0;width:30px;height:30px;">
| |
| <div style="background:#6cf; border-radius:50%; width:100%; height:100%;"></div>
| |
| <div style="border:30px solid transparent;border-bottom-color:#6cf;border-left-width:15px;border-right-width:15px;position:absolute;top:-45px;"></div>
| |
| <div style="border:30px solid transparent;border-left-color:#f9f9f9;border-right-color:#f9f9f9;border-left-width:16px;border-right-width:16px;border-radius:50%;position:absolute;top:-40px;left:-1px;"></div>
| |
| <div style="width:18px;height:18px;background-color:#36f;border-radius:50%;position:absolute;left:6px;top:12px;"></div>
| |
| <div style="border:18px solid transparent;border-bottom-color:#3366ff;border-left-width:9px;border-right-width:9px;position:absolute;top:-12px;left:6px;"></div>
| |
| <div style="border:17px solid transparent;border-left-color:#66ccff;border-right-color:#66ccff;border-left-width:9px;border-right-width:9px;border-radius:50%;position:absolute;top:-8px;left:6px;"></div>
| |
| <div style="border:10px solid transparent;border-left-color:#3366ff;border-right-color:#3366ff;border-left-width:5px;border-right-width:5px;border-radius:50%;position:absolute;top:9px;left:10px;"></div>
| |
| </div>
| |
| </div>
| |
| |after=<div style="border:30px solid green;border-left-color:black;border-right-color:black;border-top-width:37.5px;border-bottom-width:37.5px;border-radius:50%;width:15px;"></div>
| |
| <div style="position:relative;left:200px;top:-240px;">
| |
| </div>
| |
| }}
| |
| <noinclude>[[分類:模板說明文件]]</noinclude> | | <noinclude>[[分類:模板說明文件]]</noinclude> |
2020年2月21日 (五) 16:52的版本
本模板用于图片以外的hover切换效果（比如文字，css自绘图形），但也可以应用到图片。使用了widget:Hover。
参数与实例
一共有十二个参数，其中有两个是必须的。
参数列表
| 参数名
|
是否必须
|
参数样式
|
参数示例
|
参数作用
|
| before |
是 |
任意 |
你看得到我 |
设置鼠标未放置于其上时显示的字符等
|
| after |
任意 |
现在你看不到 |
设置鼠标放置于其上时显示出的字符等
|
| width |
否，默认为最大需要的大小 |
数字(+单位) |
150
10em |
设置显示的字符等的宽度，不加单位时默认为px
|
| height |
设置显示的字符等高度，不加单位时默认为px
|
| float |
否，默认为none |
left / right |
让hover块浮动起来~
|
| hp |
否，不指定则不更改任何内容 |
relative/absolute/static/fixed |
控制 hover 类的 position 属性 (HoverPositionOverride)
|
| dis |
否，不指定则不更改任何内容 |
inline-block/block |
控制 hover 类的 display 属性 (HoverDisplayOverride)
|
| hb |
否，不指定则不更改任何内容 |
none/inline-block/block |
控制 hoverbefore 类的 display 属性 (HoverBeforeDisplay)
|
| ha |
否，不指定则不更改任何内容 |
none/inline-block/block |
控制 hoverafter 类的 display 属性 (HoverAfterDisplay)
|
| onhb |
否，不指定则不更改任何内容 |
none/inline-block/block |
控制 hoverbefore 类的 display 属性 (鼠标放置时) (HoverBeforeDisplayOnHover)
|
| onha |
否，不指定则不更改任何内容 |
none/inline-block/block |
控制 hoverafter 类的 display 属性 (鼠标放置时) (HoverAfterDisplayOnHover)
|
备注: 如果使用了参数 onhb 和 onha，则只有鼠标在 hoverbefore 上时 hoverafter 才会出现。
于是完整的代码实例如下：
对于文字：
{{Hover|before={{color|blue|你看得到我}}|after={{color|red|现在你看不到}}}}
显示效果：
{{#Widget:Hover}}