模板:Hover/doc

出自H萌娘
跳至導覽 跳至搜尋

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

參數與實例[編輯原始碼]

一共有十二個參數,其中有兩個是必須的。

參數列表
參數名 是否必須 參數樣式 參數示例 參數作用
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)

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

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

對於圖片:與{{PicHover}}類似,但是圖片需要直接填鏈接。

{{Hover|before=[[文件:58185939_1.png|缩略图]]|after=[[文件:58185939_3.png|缩略图]]}}

顯示效果:

58185939 1.png
58185939 3.png

對於文字:

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

顯示效果:

你看得到我
現在你看不到

對於自選圖形

与文字类似,字太多影响阅读我就不写了……

顯示效果: