CSS 中 outline 属性在 :hover 时未按预期触发，根本原因是缺失 outline 的样式关键词（如 solid）和颜色值，导致浏览器无法解析为有效声明，从而回退到默认行为或延迟应用。
css 中 `outline` 属性在 `:hover` 时未按预期触发，根本原因是缺失 outline 的样式关键词（如 `solid`）和颜色值，导致浏览器无法解析为有效声明，从而回退到默认行为或延迟应用。
在你提供的代码中，.cardImg:hover 里仅写了：
outline: 3px;
这不是一个合法的 outline 声明。CSS 的 outline 是一个复合属性，等价于 outline-width、outline-style 和 outline-color 的简写。而 3px 仅指定了宽度，缺少必需的 outline-style（如 solid、dashed 等），浏览器会将其视为无效值并忽略该声明——因此 hover 时 outline 实际未变化；直到鼠标移出（:hover 状态结束），浏览器可能因样式重计算或过渡缓存机制“意外”应用了旧值或回退值，造成“只在 mouseoff 时变粗”的错觉。
✅ 正确写法必须显式指定三要素（至少 style + width，color 建议保留以确保一致性）：
.cardImg {
border-radius: 15px;
outline: solid 1px rgb(90, 87, 79); /* ✅ 完整声明 */
width: 150px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.52);
position: absolute;
margin: auto;
cursor: grab;
transition: outline 500ms ease-in-out,
transform 500ms ease-in-out,
filter 500ms ease-in-out; /* ✅ 推荐为各属性单独声明 transition */
display: inline-block;
}
.cardImg:hover {
outline: solid 3px rgb(90, 87, 79); /* ✅ 完整、匹配的 outline 声明 */
transform: rotate(-5deg);
filter: brightness(125%);
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
-
不要省略
outline-style：outline: 3px或outline: 3px black均非法；必须包含solid/dashed等关键字。 -
颜色需显式定义：即使希望沿用原色，也应重复写出（如
rgb(90, 87, 79)），避免因继承或透明色导致不可见。 -
建议精细化
transition：将transition: 500ms ease-in-out改为针对具体属性（如上例），防止未声明属性意外触发过渡，提升可维护性与性能。 - 替代方案考虑：若仅需视觉边框且需精确控制布局，
border比outline更可靠（但注意border会影响盒模型尺寸，需配合box-sizing: border-box）。
总结：CSS outline 的 hover 失效几乎总是源于简写语法不完整。补全 outline-style 与 outline-color，并合理设置 transition，即可让所有悬停效果同步、即时响应。
