HoverFill

HoverFill is a component that displays a light background when hovering on it.

HoverFill will show background based on the hover origin.

As a Light Button

HoverFill can be used as a light button:

import Springen from 'springen';

<Springen.HoverFill bgClassName="rounded-md">
  <button className="inline-flex items-center justify-center gap-0.5 h-9 px-3 text-sm">
    light-button
  </button>
</Springen.HoverFill>

As a Light Card

HoverFill can be used as a light card:

隔壁大哥与小李

北京

视频号特色

import Springen from 'springen';

<Springen.HoverFill bgClassName="rounded-lg">
  <div className="flex p-4 gap-3 w-[356px]"></div>
</Springen.HoverFill>

Siblings Share Background

When HoverFills share the same parent as siblings, they will automatically share one background when you hover from one to another.

Make sure not to set overflow: hidden on the parent element, otherwise don’t use this component.

As Light Buttons:

different parent

添加达人

从名单添加

As Light Cards:

隔壁大哥与小李

北京

视频号特色

隔壁大哥与小李

北京

视频号特色

隔壁大哥与小李

北京

视频号特色

隔壁大哥与小李

北京

视频号特色

隔壁大哥与小李

北京

视频号特色

隔壁大哥与小李

北京

视频号特色

As Light Form Controls in Table:

已选达人

添加达人

从名单添加

微品牌

视频时长

1至60秒

60秒以上

额外服务

选填额外服务

出镜拍摄

期望发表时间段

请选择期望发表的时间段

2025-03-11 ~ 2025-03-31

合作报价

￥60,000

￥8,888,888

操作

菜菜美食日记

视频时长

1至60秒

额外服务

选填额外服务

期望发表时间段

请选择期望发表的时间段

合作报价

￥60,000

操作

As Table Rows:

指数名称

指数值

30天环比

行业均值

行业排名

社交指数

92.5

+0.5%

80

前0.5%

互动指数

84.2

-1.1%

80

前50%

合作指数

80.2

+3.4%

70

前10%

性价比指数

92.5

+0.5%

80

低于50%

成长指数

92.5

+0.5%

80

低于50%

As List Items:

自定义列表

重置

默认列：创作者、亮点视频、亮点标签

粉丝量级

粉丝增长量

粉丝增长率

平均播放量

播放中位数

API