如何让CSS Transition在:focus而非:hover状态下生效？

嘿，这问题我碰到过！核心原因是大部分非交互元素（比如你的.card如果是div这类块级元素的话）默认是不能被键盘聚焦的，所以你替换成:focus后，键盘根本触发不了这个状态。下面是具体的解决步骤和优化方案：

1. 让元素可被键盘聚焦 #

给你的.card元素添加tabindex="0"属性，这样它就能被Tab键选中并触发:focus状态了：

<div class="card" tabindex="0">
  <!-- 你的卡片内容 -->
</div>

• tabindex="0"表示元素会按正常的Tab顺序被聚焦，是最推荐的取值；如果用-1的话，只能通过JS手动聚焦，不适合你的键盘操控场景。

2. 调整CSS样式 #

把原来的:hover替换（或同时保留）为:focus，同时建议加上:focus-visible来优化可访问性：

.card {
  height: 200px;
  width: 140px;
  overflow: hidden;
  transition: box-shadow 0.15s ease-out, transform 0.25s ease;
  perspective: 600px;
  border-radius: 5px;
  /* 基础的聚焦样式，保证可访问性 */
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* 同时支持鼠标hover和键盘focus，兼顾两种交互方式 */
.card:hover,
.card:focus {
  transform: scale(1.1);
  box-shadow: none;
}

/* 可选：自定义键盘聚焦的视觉反馈 */
.card:focus-visible {
  outline-color: #2563eb; /* 换成你需要的颜色 */
}

关键说明 #

• 为什么加:focus-visible？它只会在用户用键盘聚焦时显示自定义outline，鼠标点击聚焦不会触发，既保证了键盘用户的视觉反馈，又不会干扰鼠标用户的体验。
• 千万别直接去掉默认outline而不替换！这会让键盘用户找不到当前聚焦的元素，严重影响可访问性。

这样修改后，你用Tab键选中卡片时，就能看到和原来hover一样的放大效果啦～

内容的提问来源于stack exchange，提问作者mike