Difference between revisions of "Template:Hover/doc"

From Moegirlpedia
Jump to: navigation, search
(Created page with "本模板用于图片以外的hover切换效果（比如文字，css自绘图形），但也可以应用到图片。使用了widget:Hover。 ==注意== 使用本模板时...")
 
(Translated)
 
Line 1: Line 1:
−
本模板用于图片以外的hover切换效果（比如文字，css自绘图形），但也可以应用到图片。使用了[[widget:Hover]]。
+
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.
−
 
+
<!--
 
==注意==
 
==注意==
 
使用本模板时请检查移动端有无显示问题。如果不知道如何解决移动端的显示问题，可以尝试替换为{{tl|TextHover}}模板。
 
使用本模板时请检查移动端有无显示问题。如果不知道如何解决移动端的显示问题，可以尝试替换为{{tl|TextHover}}模板。
 +
--><!-- No mobile view for EnMGP -->
 +
== Parameters & Instances ==
 +
There are 15 parameters in total, of which two are required.
  
−
==参数与实例==
 
−
一共有15个参数，其中有两个是必须的。
 
 
{| class="wikitable" style="text-align: center;"
 
{| class="wikitable" style="text-align: center;"
−
|+参数列表
+
|+List of parameters
 
|-
 
|-
−
! 参数名
+
! Name of parameter
−
! 是否必须
+
! Whether necessary
−
! 参数样式
+
! Style of parameter
−
! 参数示例
+
! Instance of parameter
−
! 参数作用
+
! Role of parameter
 
|-
 
|-
−
| before || rowspan="2" | 是 || 任意 || 你看得到我 || 设置鼠标未放置于其上时显示的字符等
+
| before || rowspan="2" | Yes || Any || You can see me. || Set the characters displayed when the mouse is not hovered.
 
|-
 
|-
−
| after ||任意 || 现在你看不到 || 设置鼠标放置于其上时显示出的字符等
+
| after ||Any || Now you can't see. || Set the characters displayed when the mouse is hovered.
 
|-
 
|-
−
| width || rowspan="2" | 否，默认为最大需要的大小 || rowspan="2" | 数字(+单位) || rowspan="2" | 150<br>10em || 设置显示的字符等的宽度，不加单位时默认为px
+
| width || rowspan="2" | No, the default is the largest required size. || rowspan="2" | Number(+unit) || rowspan="2" | 150<br />10em || Set the width of the displayed characters. The default is px when there is no unit.
 
|-
 
|-
−
| height || 设置显示的字符等高度，不加单位时默认为px
+
| height || Set the height of the displayed characters. The default is px when there is no unit.
 
|-
 
|-
−
| float || 否，默认为none || colspan=2 | left / right || 让hover块浮动起来~
+
| float || No, the default is none. || colspan=2 | left / right || Float the hover block~
 
<!-- |-
 
<!-- |-
 
| mode || 否，默认为0 || colspan=2 | 0 / 1 || 展示方式不同_(:зゝ∠)_ --><!-- Shirrak前辈暂时拿掉了mode参数 -->
 
| mode || 否，默认为0 || colspan=2 | 0 / 1 || 展示方式不同_(:зゝ∠)_ --><!-- Shirrak前辈暂时拿掉了mode参数 -->
 
|-
 
|-
−
| hp || 否，不指定则不更改任何内容 || colspan=2 | relative/absolute/static/fixed || 控制 hover 类的 position 属性 (HoverPositionOverride)
+
| hp || No, nothing happens if not specified. || colspan=2 | relative/absolute/static/fixed || Control the property position of class hover (HoverPositionOverride).
 
|-
 
|-
−
| dis || 否，不指定则不更改任何内容 || colspan=2 | inline-block/block || 控制 hover 类的 display 属性 (HoverDisplayOverride)
+
| dis || No, nothing happens if not specified. || colspan=2 | inline-block/block || Control the property display of class hover (HoverDisplayOverride).
 
|-
 
|-
−
| hb || 否，不指定则不更改任何内容 || colspan=2 | none/inline-block/block || 控制 hoverbefore 类的 display 属性 (HoverBeforeDisplay)
+
| hb || No, nothing happens if not specified. || colspan=2 | none/inline-block/block || Control the property display of class hoverbefore (HoverBeforeDisplay).
 
|-
 
|-
−
| ha || 否，不指定则不更改任何内容 || colspan=2 | none/inline-block/block || 控制 hoverafter 类的 display 属性 (HoverAfterDisplay)
+
| ha || No, nothing happens if not specified. || colspan=2 | none/inline-block/block || Control the property display of class hoverafter (HoverAfterDisplay).
 
|-
 
|-
−
| onhb || 否，不指定则不更改任何内容 || colspan=2 | none/inline-block/block || 控制 hoverbefore 类的 display 属性 (鼠标放置时) (HoverBeforeDisplayOnHover)
+
| onhb || No, nothing happens if not specified. || colspan=2 | none/inline-block/block || Control the property display of class hoverbefore when mouse is hovered (HoverBeforeDisplayOnHover).
 
|-
 
|-
−
| onha || 否，不指定则不更改任何内容 || colspan=2 | none/inline-block/block || 控制 hoverafter 类的 display 属性 (鼠标放置时) (HoverAfterDisplayOnHover)
+
| onha || No, nothing happens if not specified. || colspan=2 | none/inline-block/block || Control the property display of class hoverafter when mouse is hovered (HoverAfterDisplayOnHover).
 
|-
 
|-
−
| css || 否，不指定则不更改任何内容 || colspan=2 rowspan=3 | 自定義 || 自定義樣式
+
| css || No, nothing happens if not specified. || colspan=2 rowspan=3 | Customized || Customized style
 
|-
 
|-
−
| cssb || 否，不指定则不更改任何内容 || 自定義樣式 (hoverbefore 类)
+
| cssb || No, nothing happens if not specified. || Customized style (class hoverbefore)
 
|-
 
|-
−
| cssa || 否，不指定则不更改任何内容 || 自定義樣式 (hoverafter 类)
+
| cssa || No, nothing happens if not specified. || Customized style (class hoverafter)
 
|-
 
|-
 
|}
 
|}
  
−
'''备注''': 如果使用了参数 <code>onhb</code> 和 <code>onha</code>，则只有鼠标在 <code>hoverbefore</code> 上时 <code>hoverafter</code> 才会出现。
+
'''Note''': If <code>onhb</code> and <code>onha</code> are specified, <code>hoverafter</code> shows only when the mouse hovers over <code>hoverbefore</code>.
  
−
于是完整的代码实例如下：
+
Examples with complete code are as follows:
  
−
;对于图片：
+
;For pictures:
−
与{{tl|PicHover}}类似，但是图片需要直接填链接。
+
Similar to {{tl|PicHover}}, but pictures need to be directly linked.
 
<pre>
 
<pre>
 
{{Hover|before=[[File:ZhMoegirl15.2.png|link=]]|after=[[File:Zh2014 moegirlpedia logo.png|link=]]|width=150|height=180}}
 
{{Hover|before=[[File:ZhMoegirl15.2.png|link=]]|after=[[File:Zh2014 moegirlpedia logo.png|link=]]|width=150|height=180}}
 
</pre>
 
</pre>
−
显示效果：
+
Outcome:
 
{{Hover|before=[[File:ZhMoegirl15.2.png|link=]]|after=[[File:Zh2014 moegirlpedia logo.png|link=]]|width=150|height=180<!--|mode=1-->}}
 
{{Hover|before=[[File:ZhMoegirl15.2.png|link=]]|after=[[File:Zh2014 moegirlpedia logo.png|link=]]|width=150|height=180<!--|mode=1-->}}
  
−
;对于文字：
+
;For texts:
−
直接调用：
+
Call directly:
 
<pre>
 
<pre>
−
{{Hover|before={{color|blue|你看得到我}}|after={{color|red|现在你看不到}}}}
+
{{Hover|before={{color|blue|You can see me.}}|after={{color|red|Now you can't see.}}}}
 
</pre>
 
</pre>
−
显示效果：
+
Outcome:
−
{{Hover|before={{color|blue|你看得到我}}|after={{color|red|现在你看不到}}}}
+
{{Hover|before={{color|blue|You can see me.}}|after={{color|red|Now you can't see.}}}}
  
−
;行/段落内文字显示指南：
+
;Guidelines for displaying text in lines/paragraphs:
−
'''建议使用{{tl|HoverInline}}模板'''
+
'''Template {{tl|HoverInline}} is recommended.'''
−
*需要使用html标签括起来，div、span都可以，星号、半角冒号等缩进方式也自带标签。
+
*HTML tags are required, div and span are both acceptable, indentation types like asterisks and half-width colons are also with tags.
−
:正文里最简单的方法应该是将整个段落用<code><nowiki><poem>...</poem></nowiki></code>包裹起来。
+
:The easiest way to use in line is wrapping the whole paragraph with <code><nowiki><poem>...</poem></nowiki></code>.
−
*设置display参数为inline-block。
+
*Set the display parameter to inline-block.
−
*设置比较长的元素的CSS，加上<code>position:relative;</code>。
+
*For CSS of long elements, add <code>position:relative;</code>.
 
<pre>
 
<pre>
 
<poem>
 
<poem>
−
哈哈哈{{Hover|display=inline-block|before={{color|blue|你看得到我}}|cssa=position: relative;|after={{color|red|现在你看不到}}}}吗？！
+
Hahaha, {{Hover|display=inline-block|before={{color|blue|you can see me}}|cssa=position: relative;|after={{color|red|now you can't see}}}}?!
 
</poem>
 
</poem>
−
*哈哈哈{{Hover|display=inline-block|before={{color|blue|你看得到我}}|cssa=position: relative;|after={{color|red|现在你看不到}}}}吗？！
+
*Hahaha, {{Hover|display=inline-block|before={{color|blue|you can see me}}|cssa=position: relative;|after={{color|red|now you can't see}}}}?!
 
</pre>
 
</pre>
−
效果：
+
Outcome:
 
<poem>
 
<poem>
−
哈哈哈{{Hover|display=inline-block|before={{color|blue|你看得到我}}|cssa=position: relative;|after={{color|red|现在你看不到}}}}吗？！
+
Hahaha, {{Hover|display=inline-block|before={{color|blue|you can see me}}|cssa=position: relative;|after={{color|red|now you can't see}}}}?!
 
</poem>
 
</poem>
−
*哈哈哈{{Hover|display=inline-block|before={{color|blue|你看得到我}}|cssa=position: relative;|after={{color|red|现在你看不到}}}}吗？！
+
*Hahaha, {{Hover|display=inline-block|before={{color|blue|you can see me}}|cssa=position: relative;|after={{color|red|now you can't see}}}}?!
  
−
'''对于自选图形'''
+
'''For customized graphics'''
 
<pre>
 
<pre>
−
与文字类似，字太多影响阅读我就不写了……
+
Similar to texts.
 
</pre>
 
</pre>
−
显示效果：
+
Outcome:
 
{{Hover
 
{{Hover
 
|before=    <div style="width:40px;height:54px;background-color:#f9f9f9;margin-top:0px;overflow:hidden;border:1px solid #f9f9f9;">
 
|before=    <div style="width:40px;height:54px;background-color:#f9f9f9;margin-top:0px;overflow:hidden;border:1px solid #f9f9f9;">
Line 107: Line 108:
 
}}
 
}}
  
−
== 相关模板 ==
+
== Related templates ==
 
{{tl|Moe-hover}}
 
{{tl|Moe-hover}}
  
 
{{tl|Hovers}}
 
{{tl|Hovers}}

Latest revision as of 01:55, 24 August 2020

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:

ZhMoegirl15.2.png
Zh2014 moegirlpedia logo.png

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

Retrieved from "https://en.moegirl.org.cn/index.php?title=Template:Hover/doc&oldid=25593"