This 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}}