模板:Hover

模板文檔  

這個文檔嵌入自Template:Hover/doc。

本模板用於圖片以外的hover切換效果（比如文字，css自繪圖形），但也可以應用到圖片。使用了widget:Hover。

注意

使用本模板時請檢查移動端有無顯示問題。如果不知道如何解決移動端的顯示問題，可以嘗試替換為{{TextHover}}模板。

參數與實例

一共有15個參數，其中有兩個是必須的。

參數列表

參數名	是否必須	參數樣式	參數示例	參數作用
before	是	任意	你看得到我	設置鼠標未放置於其上時顯示的字符等
after		任意	現在你看不到	設置鼠標放置於其上時顯示出的字符等
width	否，默認為最大需要的大小	數字(+單位)	150 10em	設置顯示的字符等的寬度，不加單位時默認為px
height				設置顯示的字符等高度，不加單位時默認為px
float	否，默認為none	left / right		讓hover塊浮動起來~
hp	否，不指定則不更改任何內容	relative/absolute/static/fixed		控制 hover 類的 position 屬性 (HoverPositionOverride)
dis	否，不指定則不更改任何內容	inline-block/block		控制 hover 類的 display 屬性 (HoverDisplayOverride)
hb	否，不指定則不更改任何內容	none/inline-block/block		控制 hoverbefore 類的 display 屬性 (HoverBeforeDisplay)
ha	否，不指定則不更改任何內容	none/inline-block/block		控制 hoverafter 類的 display 屬性 (HoverAfterDisplay)
onhb	否，不指定則不更改任何內容	none/inline-block/block		控制 hoverbefore 類的 display 屬性 (鼠標放置時) (HoverBeforeDisplayOnHover)
onha	否，不指定則不更改任何內容	none/inline-block/block		控制 hoverafter 類的 display 屬性 (鼠標放置時) (HoverAfterDisplayOnHover)
css	否，不指定則不更改任何內容	自定義		自定義樣式
cssb	否，不指定則不更改任何內容			自定義樣式 (hoverbefore 類)
cssa	否，不指定則不更改任何內容			自定義樣式 (hoverafter 類)

備註: 如果使用了參數 onhb 和 onha，則只有鼠標在 hoverbefore 上時 hoverafter 才會出現。

於是完整的代碼實例如下：

對於圖片：

與{{PicHover}}類似，但是圖片需要直接填鏈接。

{{Hover|before=[[File:ZhMoegirl15.2.png|link=]]|after=[[File:Zh2014 moegirlpedia logo.png|link=]]|width=150|height=180}}

顯示效果：

對於文字：

直接調用：

{{Hover|before={{color|blue|你看得到我}}|after={{color|red|现在你看不到}}}}

顯示效果：

你看得到我

現在你看不到

行/段落內文字顯示指南：

建議使用{{HoverInline}}模板

• 需要使用html標籤括起來，div、span都可以，星號、半角冒號等縮進方式也自帶標籤。

正文裡最簡單的方法應該是將整個段落用<poem>...</poem>包裹起來。

• 設置display參數為inline-block。
• 設置比較長的元素的CSS，加上position:relative;。

<poem>
哈哈哈{{Hover|display=inline-block|before={{color|blue|你看得到我}}|cssa=position: relative;|after={{color|red|现在你看不到}}}}吗？！
</poem>
*哈哈哈{{Hover|display=inline-block|before={{color|blue|你看得到我}}|cssa=position: relative;|after={{color|red|现在你看不到}}}}吗？！

效果：

哈哈哈

你看得到我

現在你看不到

嗎？！

• 哈哈哈
  你看得到我

  現在你看不到
  嗎？！

對於自選圖形

與文字類似，不再一一贅述。

顯示效果：

相關模板

{{Moe-hover}}

{{Hovers}}