模板:Hover

来自SS唯基
跳到导航 跳到搜索
Documentation icon 模板文档[-查看-] [编辑] [历史] [刷新]

用不了x 没widget

本模板用于图片以外的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 才会出现。

于是完整的代码实例如下:


对于文字:

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

显示效果:

你看得到我
现在你看不到
{{#Widget:Hover}}