|
|
(未显示3个用户的6个中间版本) |
第1行: |
第1行: |
| 本模板用于图片以外的hover切换效果(比如文字,css自绘图形),但也可以应用到图片。使用了[[widget:Hover]]。
| | <big>用不了x 没widget</big> |
| | |
| | 本模板用于图片以外的hover切换效果(比如文字,css自绘图形),但也可以应用到图片。使用了widget:Hover。 |
| ==参数与实例== | | ==参数与实例== |
| 一共有十二个参数,其中有两个是必须的。 | | 一共有十二个参数,其中有两个是必须的。 |
第41行: |
第43行: |
| 于是完整的代码实例如下: | | 于是完整的代码实例如下: |
|
| |
|
| '''对于图片:'''与{{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行: |
第51行: |
| {{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>
| |
2022年8月31日 (三) 12:23的最新版本
用不了x 没widget
本模板用于图片以外的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}}