悬停浮起 · Bootstrap 6.0 中文文档

它是如何工作的

将.hover-lift添加到任何元素以轻微提升它——在用户悬停或使用键盘聚焦时将其向上移动并加深其阴影。这是一种轻量的方式来提示卡片、方块或其他表面是可交互的。

该效果由 CSS 自定义属性驱动，并通过我们的 transition() mixin 应用，因此完全可定制，并且会自动遵循 prefers-reduced-motion 媒体特性——偏好减少动画的用户将获得提升的阴影和偏移效果，但没有动画。

示例

将鼠标悬停或使用标签键到下面的卡片上即可看到它升起。

悬停我

此卡在悬停和键盘聚焦时会提升。

HTML

<a href="#" class="card hover-lift text-decoration-none" style="max-width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">Hover me</h5>
    <p class="card-text mb-0">This card lifts on hover and keyboard focus.</p>
  </div>
</a>

因为它只设置 transform 和 box-shadow，.hover-lift 可以与任何元素组合——按钮、列表项或普通容器。

HTML

<button type="button" class="btn-solid theme-primary hover-lift">Lift on hover</button>

CSS

变量

悬停提升助手在.hover-lift上使用本地 CSS 变量进行实时自定义。CSS 变量的值是由每个组件独有的 Sass map生成的，并应用于上述类。

scss/辅助/_悬停提升.scss

// stylelint-disable-next-line scss/dollar-variable-default
$hover-lift-tokens: defaults(
  (
    --hover-lift-transition-duration: .2s,
    --hover-lift-transition-timing: ease,
    --hover-lift-transform: translateY(-.25rem),
    --hover-lift-box-shadow: var(--box-shadow-lg),
  ),
  $hover-lift-tokens
);

覆盖令牌以调整提升距离、阴影或时间。例如，更大幅度的上升并带有更快的过渡：

更大的提升

自定义变换和持续时间。

HTML

<a href="#" class="card hover-lift text-decoration-none" style="--bs-hover-lift-transform: translateY(-.5rem); --bs-hover-lift-transition-duration: .1s; max-width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">Bigger lift</h5>
    <p class="card-text mb-0">Customized transform and duration.</p>
  </div>
</a>