Template:Hover/doc

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.

List of parameters

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 me

  now you can't see
  ?!

For customized graphics

Similar to texts.

Outcome:

Related templates

{{Moe-hover}}

{{Hovers}}