CSS伪类中的:hover和:focus分别对应鼠标悬停与元素获得焦点两种状态，二者在交互设计中常常需要同时处理，才能保证鼠标用户和键盘用户都能获得清晰的反馈。单独使用其中一个伪类，容易出现样式覆盖不完整或焦点指示丢失的问题。本文会从触发机制入手，结合过渡动画和焦点可见性，给出可复用的样式方案。
一、:hover与:focus的触发差异及组合选择器
:hover的触发条件非常直观：当指针移动到元素上方时，对应的样式规则就会生效。在桌面端，它是提升操作感的主要手段，无论是按钮、链接还是卡片，悬停反馈都能让用户感受到元素的可交互性。但需要注意的是，:hover并非在所有设备上都可靠。触摸屏设备上，轻触可能触发一次悬停状态，但在手指离开后样式不一定能及时恢复，甚至会出现样式粘滞的问题。因此，仅依靠:hover来传达状态变化，对移动端用户和键盘用户都不够友好。
:focus表示元素当前获得了焦点。触发方式包括鼠标点击、键盘Tab键导航、以及脚本调用focus()方法。对于键盘用户而言，焦点轮廓是定位当前操作元素的关键视觉线索。如果开发者直接使用outline: none移除了默认焦点框，却没有提供任何替代样式，那么键盘用户将完全失去位置感。所以，在设计交互样式时，必须把:focus和:hover放在同等重要的位置来考虑。
实际开发中，经常需要让两个伪类共享一部分样式，同时又保留各自的差异。最简单的方式是使用逗号分组选择器，例如.btn:hover, .btn:focus。如果需要针对同时悬停且聚焦的状态做进一步调整，可以使用复合选择器.btn:hover:focus。下面的代码展示了这种组合的基本用法：
/* 共享基础反馈 */
.btn:hover,
.btn:focus {
outline: none;
border-color: #4a90d9;
box-shadow: 0 2px 8px rgba(74, 144, 217, 0.4);
}
/* 只在同时悬停且聚焦时加深背景 */
.btn:hover:focus {
background-color: #e8f0fe;
}
需要留意的是，选择器的优先级和书写顺序会影响最终呈现效果。如果:focus的规则写在:hover之后，并且二者存在冲突属性，那么焦点状态会覆盖悬停状态。在设计时可以先明确哪个状态需要更强的视觉权重，再决定规则的先后顺序。
二、用过渡与变换构建流畅交互动画
交互动画是否流畅，很大程度上取决于transition属性的放置位置。很多开发者习惯把transition写在:hover规则内部，这样做虽然鼠标移入时有动画，但鼠标移出时过渡会立即消失，导致状态切换非常生硬。正确做法是将transition定义在元素的基础状态中，例如直接写在.btn上。这样无论是进入悬停状态还是离开悬停状态，浏览器都会根据过渡参数平滑计算中间值。
在按钮组件中，常见的交互动画包括位移动画、阴影变化和边框颜色过渡。使用transform: translateY(-2px)可以实现轻微上浮效果，配合box-shadow的扩散可以让按钮看起来更立体。需要注意的是，transform和box-shadow都属于合成层友好的属性，动画性能较好，不会引起大规模重排。如果同时使用:hover和:focus，建议将相同的动画属性放在一个规则中，避免重复定义导致维护困难。
以下是一个完整的按钮交互动画示例，展示了如何同时处理悬停和聚焦状态，并保留键盘焦点可见性：
<button class="btn">提交订单</button>
.btn {
padding: 10px 20px;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 6px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.btn:hover,
.btn:focus {
border-color: #4a90d9;
box-shadow: 0 4px 12px rgba(74, 144, 217, 0.35);
transform: translateY(-2px);
}
.btn:focus-visible {
outline: 2px solid #4a90d9;
outline-offset: 2px;
}
这个例子中，transition被设置在.btn基础状态上，因此鼠标进入和离开时都会产生平滑动画。:focus-visible规则用来为键盘用户提供额外的焦点指示，同时不影响鼠标点击后的视觉整洁度。
三、:focus-visible与焦点可见性的配合策略
:focus-visible是一个相对较新的伪类，它的核心价值在于根据输入方式智能决定是否显示焦点样式。当用户通过键盘Tab键或辅助技术导航时，:focus-visible会匹配并获得样式；而当用户通过鼠标点击元素时，该伪类通常不会匹配，从而避免了鼠标操作后出现突兀的焦点框。这一行为正好解决了开发者长期面临的两难问题：既想保留键盘用户的焦点指示，又不想让鼠标用户看到多余的轮廓。
在支持:focus-visible的现代浏览器中，推荐的做法是将默认的outline移除，然后为:focus-visible定义清晰的焦点环。这样做的好处是，鼠标点击按钮时不会出现默认的蓝色轮廓，但键盘导航时仍然能看到醒目的焦点提示。需要注意的是，不要同时使用:focus和:focus-visible定义冲突的轮廓样式，否则可能因为优先级问题导致焦点环不生效或被覆盖。
下面的代码展示了一种常见的组合策略：:hover负责表面变化，:focus-visible负责焦点环，而基础状态不显示默认轮廓。
/* 基础状态不显示默认轮廓，但不要直接去掉而忘记自定义 */
.btn {
outline: none;
}
/* 鼠标悬停效果 */
.btn:hover {
background-color: #f5f8fc;
transform: scale(1.02);
}
/* 键盘聚焦时显示明显的焦点环 */
.btn:focus-visible {
outline: 2px solid #2b6cb0;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(43, 108, 176, 0.2);
}
如果项目需要兼容不支持:focus-visible的旧浏览器，可以考虑使用:focus作为回退方案，同时利用@supports查询来渐进增强。不过，对于大多数现代Web应用来说，直接使用:focus-visible已经足够，并且能显著提升无障碍体验。
四、表单输入框与卡片组件的应用实例
表单输入框是:hover与:focus结合应用的典型场景。对于文本输入框，悬停时轻微改变边框颜色可以暗示可交互性，而聚焦时则需要更明显的边框高亮和阴影来表示正在输入。通常的做法是让:hover使用较浅的边框色，:focus使用品牌色并增加外发光效果，这样用户能清楚区分两个状态。
卡片组件稍微复杂一些，因为卡片本身并不一定能自然获得焦点。如果需要通过键盘导航到卡片，可以为卡片添加tabindex="0"属性使其可聚焦。然后使用:hover处理鼠标悬停时的上浮和阴影变化，使用:focus-visible处理键盘聚焦时的轮廓。这样可以避免鼠标点击卡片后出现焦点框，同时保证键盘用户能够定位当前卡片。
<div class="card" tabindex="0"> <h3>服务介绍</h3> <p>这是一段卡片内容。</p> </div>
.card {
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
border-color: #c0c0c0;
}
.card:focus-visible {
outline: 2px solid #2b6cb0;
outline-offset: 3px;
}
移动端环境需要特别处理:hover的粘滞问题。由于触摸屏没有真正的悬停状态，点击元素后:hover样式可能会一直保留，直到用户点击其他区域。为了避免这种情况，可以使用媒体查询@media (hover: hover)将悬停效果限制在真正支持悬停的设备上。这样移动端只会依赖:focus和:focus-visible提供的反馈，交互体验更加自然。
@media (hover: hover) {
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
}
除了上述场景，导航菜单、标签页、开关按钮等组件也可以运用相同的组合思路。关键在于根据用户输入方式的不同，合理分配:hover和:focus的职责，让鼠标操作轻快流畅，键盘操作清晰可辨。掌握这套方法之后，不仅能提升组件的视觉品质，也能让产品在无障碍层面更加完善。