Template:Hover：修订间差异
跳到导航
跳到搜索
imported>850710247liu （创建页面，内容为“<includeonly><div class="hover" data-HoverBeforeDisplayOnHover="{{#switch:{{{onhb}}}|none|inline-block|block={{{onhb}}}}}" data-HoverAfterDisplayOnHover="{{#switch:{…”） |
imported>=海豚= 无编辑摘要 |
||
| 第1行： | 第1行： | ||
<includeonly><div class="hover" data-HoverBeforeDisplayOnHover="{{#switch:{{{onhb}}}|none|inline-block|block={{{onhb}}}}}" data-HoverAfterDisplayOnHover="{{#switch:{{{onha}}}|none|inline-block|block={{{onha}}}}}" style="width:{{Ifnumber|{{#if:{{{width|}}}|{{{width}}}|no}}|{{{width}}}px|{{{width|auto}}}}};height:{{Ifnumber|{{#if:{{{height|}}}|{{{height}}}|no}}|{{{height}}}px|{{{height|auto}}}}};{{#switch:{{{float}}}|left|right=float:{{{float}}};}}{{#switch:{{{display}}}|inline-block|inline=display:{{{display}}};}}{{#switch:{{{cursor}}}|auto|default|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out|grab|grabbing=cursor:{{{cursor}}};}}{{#switch:{{{hp}}}|relative|absolute|static=|fixed=position: {{{hp}}} !important;}}{{#switch:{{{dis}}}|block|inline-block=display: {{{dis}}};}}"><div class="hoverbefore" style="width:{{Ifnumber|{{#if:{{{width|}}}|{{{width}}}|no}}|{{{width}}}px|{{{width|auto}}}}};height:{{Ifnumber|{{#if:{{{height|}}}|{{{height}}}|no}}|{{{height}}}px|{{{height|auto}}}}};{{#switch:{{{hb}}}|none|inline-block|block=display:{{{hb}}};}}">{{{before|{{{1|}}}}}}</div><div class="hoverafter" style=" | <includeonly><div class="hover" data-HoverBeforeDisplayOnHover="{{#switch:{{{onhb}}}|none|inline-block|block={{{onhb}}}}}" data-HoverAfterDisplayOnHover="{{#switch:{{{onha}}}|none|inline-block|block={{{onha}}}}}" style="width:{{Ifnumber|{{#if:{{{width|}}}|{{{width}}}|no}}|{{{width}}}px|{{{width|auto}}}}};height:{{Ifnumber|{{#if:{{{height|}}}|{{{height}}}|no}}|{{{height}}}px|{{{height|auto}}}}};{{#switch:{{{float}}}|left|right=float:{{{float}}};}}{{#switch:{{{display}}}|inline-block|inline=display:{{{display}}};}}{{#switch:{{{cursor}}}|auto|default|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out|grab|grabbing=cursor:{{{cursor}}};}}{{#switch:{{{hp}}}|relative|absolute|static=|fixed=position: {{{hp}}} !important;}}{{#switch:{{{dis}}}|block|inline-block=display: {{{dis}}};}} {{{css|}}}"><div class="hoverbefore" style="width:{{Ifnumber|{{#if:{{{width|}}}|{{{width}}}|no}}|{{{width}}}px|{{{width|auto}}}}};height:{{Ifnumber|{{#if:{{{height|}}}|{{{height}}}|no}}|{{{height}}}px|{{{height|auto}}}}};{{#switch:{{{hb}}}|none|inline-block|block=display:{{{hb}}};}} {{{cssb|}}}">{{{before|{{{1|}}}}}}</div><div class="hoverafter" style="width:{{Ifnumber|{{#if:{{{width|}}}|{{{width}}}|no}}|{{{width}}}px|{{{width|auto}}}}};height:{{Ifnumber|{{#if:{{{height|}}}|{{{height}}}|no}}|{{{height}}}px|{{{height|auto}}}}};{{#switch:{{{ha}}}|none|inline-block|block=display: {{{ha}}};}} {{{cssa|}}}">{{{after|{{{2|}}}}}}</div></div>{{#Widget:Hover}}<templatestyles src="Template:Hover/styles.css" /></includeonly><noinclude>{{Documentation}}[[分类:功能模板]]</noinclude> | ||
2020年3月28日 (六) 17:45的最新版本
模板文档本模板用于图片以外的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 才会出现。
于是完整的代码实例如下：
对于图片：与{{PicHover}}类似，但是图片需要直接填链接。
{{Hover|before=[[文件:58185939_1.png|缩略图]]|after=[[文件:58185939_3.png|缩略图]]}}
显示效果：
对于文字：
{{Hover|before={{color|blue|你看得到我}}|after={{color|red|现在你看不到}}}}
显示效果：
你看得到我
现在你看不到
对于自选图形
与文字类似，字太多影响阅读我就不写了……
显示效果：