- 欢迎加入官方Discord和Telegram群组!
- 我们正在删除政治内容页面,还您一个干净的H萌娘,净化社区的同时也可以让您认真学习和讨论性知识(?
- 不知道接下来该看什么?可以去查阅本站的优质条目
- 如果您在H萌娘上发现某些内容错误/空缺,请勇于修正/添加!编辑H萌娘其实很容易!(由于遭到破坏,自动确认用户外的编辑现在会先审核 )
- 有任何意见、建议、求助都可以在 讨论版 提出!
模板:Hover/doc
跳至導覽
跳至搜尋
本模板用於圖片以外的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) |
備註: 如果使用了參數 onhb
和 onha
,則只有鼠標在 hoverbefore
上時 hoverafter
才會出現。
於是完整的代碼實例如下:
對於圖片:與{{PicHover}}類似,但是圖片需要直接填鏈接。
{{Hover|before=[[文件:58185939_1.png|缩略图]]|after=[[文件:58185939_3.png|缩略图]]}}
顯示效果:
對於文字:
{{Hover|before={{color|blue|你看得到我}}|after={{color|red|现在你看不到}}}}
顯示效果:
你看得到我
現在你看不到
對於自選圖形
与文字类似,字太多影响阅读我就不写了……
顯示效果: