CSS悬停效果仅在鼠标移出时生效？技术问题求助

问题出在cardImg:hover的outline属性定义不完整：

• 初始状态下，你给outline设置了完整的三要素：solid（样式）、1px（宽度）、rgb(90, 87, 79)（颜色）
• 但hover状态下只写了outline: 3px;，这仅设置了outline的宽度，而outline的样式默认会被重置为none，颜色也未指定。此时浏览器会认为hover时不需要显示outline，所以鼠标移入时原有的1px outline消失。
• 当鼠标移出时，元素回到初始状态，完整的outline属性重新生效，加上你设置的500ms过渡动画，就会出现“移出时才变化”的错误表现。

修复代码 #

修改hover状态的outline属性，补全样式和颜色：

.cardImg {
    border-radius: 15px;
    outline: solid 1px rgb(90, 87, 79);
    width: 150px;
    box-shadow: 0 10px 15px -3px #00000083;
    position: absolute;
    margin: auto;
    cursor: grab;
    transition: 500ms ease-in-out;
    display: inline-block;
}

.cardImg:hover {
    outline: solid 3px rgb(90, 87, 79); /* 补全完整的outline属性 */
    transform: rotate(-5deg);
    filter: brightness(125%);
}

或者，如果你想复用初始状态的样式和颜色，可以单独设置outline-width：

.cardImg:hover {
    outline-width: 3px; /* 仅修改宽度，继承初始的样式和颜色 */
    transform: rotate(-5deg);
    filter: brightness(125%);
}

这样修改后，鼠标移入时outline会从1px平滑过渡到3px，和transform、filter效果同步触发。

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