最轻量的CSS卡片hover高亮方案是仅过渡border-color和box-shadow，配0.2s ease缓动，避免all过渡引发重绘；移动端加will-change: transform优化，禁用hover中修改border-radius以防失效。
hover 时用 CSS transition 实现卡片边框/阴影高亮
最轻量的动态高亮，就是纯 CSS 控制 :hover 状态下的视觉变化。不需要 JS，兼容性好，性能零开销。
关键不是“加高亮”，而是控制变化的平滑度和范围——直接改 border-color 或 box-shadow 容易突兀，必须配 transition：
card {
border: 2px solid #e0e0e0;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
card:hover {
border-color: #4285f4;
box-shadow: 0 4px 12px rgba(66, 133, 244, 0.2);
}
- 别只写
transition: all 0.2s—— 会触发不必要的重绘（比如影响opacity或transform） - 如果卡片有圆角，
border-radius不要放在 hover 里改，否则 transition 失效 - 移动端 Safari 对
box-shadow的 transition 支持不稳定，可加will-change: transform微调
需要点击保持高亮？用 :focus-within 或 JS 切换 class
纯 CSS 无法记住 hover 离开后的状态，但若只是“点一下高亮、再点一下取消”，:focus-within 配合隐藏 checkbox 是零 JS 方案；更通用的做法是用 JS 切换 class。
推荐 JS 方式：简单、可控、语义清晰：
立即学习“前端免费学习笔记（深入）”；
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
card.addEventListener('click', () => {
card.classList.toggle('highlighted');
});
对应 CSS 只需定义：
.highlighted {
border-color: #34a853 !important;
box-shadow: 0 4px 12px rgba(52, 168, 83, 0.25) !important;
}
- 避免用
!important？那就把 .highlighted 规则写在 hover 规则之后，或提高选择器权重（如.card.highlighted） - 如果卡片内有按钮或链接，记得加
tabindex="0"，否则键盘用户无法触发 focus - 不要监听
mousedown—— 会误触发，且松手位置不在元素上时状态不一致
多个卡片互斥高亮（单选模式）怎么处理？
常见于配置面板或选项卡式卡片组。核心是“激活一个，清除其余”，不能只靠 toggle。
最简逻辑：
cards.forEach(card => {
card.addEventListener('click', () => {
cards.forEach(c => c.classList.remove('highlighted'));
card.classList.add('highlighted');
});
});
- 别用
document.querySelectorAll('.card')每次重查——存成常量或用事件委托（尤其卡片动态增删时） - 如果高亮态需持久化（比如刷新后保留），得同步写入 localStorage，并在初始化时读取应用
- 注意无障碍：互斥模式下建议加
role="radiogroup"和aria-checked属性
动画卡顿或闪一下？检查这几个地方
看似简单的高亮，实际在中低端设备或复杂布局里容易出问题，多数源于隐式重排或层合成失控。
- 确保高亮只改
border-color/box-shadow/transform—— 这些属性能走 GPU 合成，不触发布局（layout） - 避免在 hover 中改
height、padding、font-size，哪怕只变 1px，也会强制重排 - 卡片父容器如果有
overflow: hidden且高亮时 shadow 溢出，可能触发额外裁剪计算，加transform: translateZ(0)强制升层 - Chrome DevTools → Rendering → 勾选 “Paint flashing”，看高亮时是否大面积闪烁（说明频繁重绘）
