Difference between revisions of "Template:Hover"
(Applied {{From other wiki}}) |
m (Added to Category:Functional templates) |
||
| 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>{{From other wiki|Chinese Moegirlpedia|Template:Hover}}{{Documentation}}</noinclude> | + | <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>{{From other wiki|Chinese Moegirlpedia|Template:Hover}}{{Documentation}}[[Category:Functional templates]]</noinclude> |
Revision as of 14:28, 2 February 2021
|
This template was originally from page Template:Hover in Chinese Moegirlpedia, and the license might be different from English Moegirlpedia. The contents might differ after being modified by different users on both sides. For more information, see Moegirlpedia:Copyrights.
|
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}}
