界面中的悬停：是什么、效果类型及实现

网页设计中的悬停是什么

悬停（英文hover——盘旋）——界面元素对鼠标指针悬停的视觉反应。该术语既指CSS :hover伪类本身，也指元素在悬停时的状态。

悬停的概念出现在早期的Xerox Alto（1973年）图形界面中，并于1998年随着CSS2的出现而在网页中标准化。从那时起，悬停成为桌面端用户体验不可分割的一部分。

根据CSS使用统计（2025年），前1000名网站中的94%至少为一个元素使用:hover伪类。悬停最常用于按钮（89%）、链接（85%）和卡片（62%）。

悬停与其他状态的区别

悬停 ≠ active。:hover在悬停时激活，:active在点击时激活。:focus在键盘聚焦时激活。每个状态都有其自己的任务。悬停是预览，active是动作确认。

CSS中的:hover伪类

CSS中的:hover伪类在用户将鼠标指针悬停在元素上时为其应用样式。它适用于任何HTML元素，但最常与交互式元素一起使用。

/* Basic hover implementation */
.button {
    background: #4A90D9;
    color: white;
    padding: 12px 24px;
    border: none;
    transition: all 0.3s ease;
}

.button:hover {
    background: #357ABD;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74,144,217,0.4);
}

特殊性——选择器:hover的特殊性与类相同（0,1,0）。如果需要覆盖特定元素的悬停，请使用具有更高特殊性的选择器。声明顺序很重要：如果在:focus之后声明:hover，悬停可能在聚焦时不起作用。

组合伪类

:hover可以与其他伪类组合以创建复杂逻辑。例如，.card:hover .card__title在悬停整个卡片时改变卡片内标题的样式。这允许创建具有嵌套动画的效果。

悬停效果的类型

悬停效果根据更改的属性类型分为几个类别。每种类型适用于不同的场景，并在用户中产生特定的感觉。

最有效的类型——颜色和阴影效果的组合。Material Design建议使用阴影高度变化作为悬停反馈的主要类型。

根据Google Material Design（2024年），悬停效果应该明显但不分散注意力。推荐的动画持续时间为200-300毫秒。太快效果（小于100毫秒）可能不被注意到，太慢效果（超过500毫秒）会激怒用户。

用于流畅效果的CSS过渡

CSS属性transition使悬停效果流畅，随时间动画化属性的变化。没有transition，悬停立即触发，看起来生硬且对眼睛不舒适。

/* Different transitions per property */
.card {
    transition:
        box-shadow 0.3s ease-out,
        transform 0.2s ease-out,
        background 0.15s linear;
}

.card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

过渡持续时间取决于上下文。对于小元素（图标、链接）——150-200毫秒。对于大元素（卡片、模态窗口）——250-350毫秒。缓动函数ease-out在结束时逐渐减缓动画，创造自然的感觉。

推荐实践——为每个动画属性分别指定transition。all属性在开发阶段方便，但在生产环境中最好定义具体的动画属性以避免意外效果。

触屏设备上的悬停

在触屏设备上没有悬停的概念：没有可以悬停在元素上的指针。触摸元素立即激活click，跳过悬停状态。如果界面仅依赖悬停，这会造成问题。

根据StatCounter（2026年），全球网页流量的62%来自移动设备。忽略触屏上悬停的缺失意味着失去对大多数用户的UX控制。

/* Disable hover on touch devices */
@media (hover: none) and (pointer: coarse) {
    .button:hover {
        background: initial;
        transform: none;
    }
}

媒体查询hover: none允许确定设备不支持悬停。在这类设备上，悬停效果被禁用，交互基于:active和:focus状态。替代方案——在触摸时显示悬停内容（第一次触摸显示悬停，第二次执行操作），但这种模式会恶化UX。

悬停效果的可访问性

悬停的可访问性——一个经常被忽视的关键方面。使用键盘操作界面的用户无法激活:hover。仅通过悬停可用的功能对他们来说变得不可访问。

WCAG 2.2规则（成功标准1.4.13——悬停或焦点上的内容）：悬停时出现的内容在聚焦时也应可用。如果悬停显示额外信息（工具提示、下拉菜单），同样的信息应在:focus时可用。

/* Hover + focus for accessibility */
.tooltip-trigger:hover .tooltip,
.tooltip-trigger:focus .tooltip {
    opacity: 1;
    visibility: visible;
}

/* Disable animation for vestibular disorder */
@media (prefers-reduced-motion: reduce) {
    *:hover {
        transition: none;
    }
}

媒体查询prefers-reduced-motion——尊重用户的系统设置。如果用户在系统中关闭了动画，悬停效果应立即应用，无过渡。这有助于前庭障碍患者。

额外建议：不要将悬停用于关键功能，不要仅使用颜色在悬停时传递信息（添加图标或文字），并确保悬停状态有足够的对比度。