Difference between revisions of "Template:Hover"
Martin Zhao (talk | contribs) (Created page with "<includeonly><div class="hover" data-HoverBeforeDisplayOnHover="{{#switch:{{{onhb}}}|none|inline-block|block={{{onhb}}}}}" data-HoverAfterDisplayOnHover="{{#switch:{{{onha}}}|...") |
Martin Zhao (talk | contribs) m |
||
| Line 1: | Line 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}}};}} {{{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}} | + | <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> |
Revision as of 14:17, 23 August 2020
Template DocumentationThis template is used for hover switching effects other than pictures (such as texts, css customized graphics), but it can also be applied to pictures. Widget:Hover is used.
Parameters & Instances
There are 15 parameters in total, of which two are required.
| Name of parameter | Whether necessary | Style of parameter | Instance of parameter | Role of parameter |
|---|---|---|---|---|
| before | Yes | Any | You can see me. | Set the characters displayed when the mouse is not hovered. |
| after | Any | Now you can't see. | Set the characters displayed when the mouse is hovered. | |
| width | No, the default is the largest required size. | Number(+unit) | 150 10em |
Set the width of the displayed characters. The default is px when there is no unit. |
| height | Set the height of the displayed characters. The default is px when there is no unit. | |||
| float | No, the default is none. | left / right | Float the hover block~ | |
| hp | No, nothing happens if not specified. | relative/absolute/static/fixed | Control the property position of class hover (HoverPositionOverride). | |
| dis | No, nothing happens if not specified. | inline-block/block | Control the property display of class hover (HoverDisplayOverride). | |
| hb | No, nothing happens if not specified. | none/inline-block/block | Control the property display of class hoverbefore (HoverBeforeDisplay). | |
| ha | No, nothing happens if not specified. | none/inline-block/block | Control the property display of class hoverafter (HoverAfterDisplay). | |
| onhb | No, nothing happens if not specified. | none/inline-block/block | Control the property display of class hoverbefore when mouse is hovered (HoverBeforeDisplayOnHover). | |
| onha | No, nothing happens if not specified. | none/inline-block/block | Control the property display of class hoverafter when mouse is hovered (HoverAfterDisplayOnHover). | |
| css | No, nothing happens if not specified. | Customized | Customized style | |
| cssb | No, nothing happens if not specified. | Customized style (class hoverbefore) | ||
| cssa | No, nothing happens if not specified. | Customized style (class hoverafter) | ||
Note: If onhb and onha are specified, hoverafter shows only when the mouse hovers over hoverbefore.
Examples with complete code are as follows:
- For pictures
Similar to {{PicHover}}, but pictures need to be directly linked.
{{Hover|before=[[File:ZhMoegirl15.2.png|link=]]|after=[[File:Zh2014 moegirlpedia logo.png|link=]]|width=150|height=180}}
Outcome:
- For texts
Call directly:
{{Hover|before={{color|blue|You can see me.}}|after={{color|red|Now you can't see.}}}}
Outcome:
You can see me.
Now you can't see.
- Guidelines for displaying text in lines/paragraphs
Template {{HoverInline}} is recommended.
- HTML tags are required, div and span are both acceptable, indentation types like asterisks and half-width colons are also with tags.
- The easiest way to use in line is wrapping the whole paragraph with
<poem>...</poem>.
- Set the display parameter to inline-block.
- For CSS of long elements, add
position:relative;.
<poem>
Hahaha, {{Hover|display=inline-block|before={{color|blue|you can see me}}|cssa=position: relative;|after={{color|red|now you can't see}}}}?!
</poem>
*Hahaha, {{Hover|display=inline-block|before={{color|blue|you can see me}}|cssa=position: relative;|after={{color|red|now you can't see}}}}?!
Outcome:
Hahaha, ?!
you can see me
now you can't see
- Hahaha, ?!you can see menow you can't see
For customized graphics
Similar to texts.
Outcome:
Related templates
{{Moe-hover}}
{{Hovers}}
