React+Framer Motion：whileHover效果残留及过渡失效问题求助

问题根源 #

1. CSS语法错误：drop-shadow里的rgb(255,255,255未闭合括号，导致样式解析异常，过渡逻辑失效
2. 缺失初始状态定义：未指定鼠标未悬停时的filter默认值，motion组件无法识别“还原目标”，导致阴影残留
3. transition配置位置错误：将transition嵌套在whileHover对象内，不符合motion组件的属性规范

修正后的代码 #

<motion.img
  initial={{ filter: 'drop-shadow(0 0 0 rgb(255,255,255))' }}
  whileHover={{ 
    filter: 'drop-shadow(0 0 0.75rem rgb(255,255,255))' 
  }}
  transition={{ duration: 0.2 }} // 建议缩短时长，0.2秒更符合交互直觉
  id='logo' 
  src={g} 
  style={{
    width: '20%', 
    height: '20%', 
    position: 'relative', 
    left: '103px'
  }}
/>

关键调整说明 #

• 修复语法错误：给rgb值补上闭合括号，确保drop-shadow样式能被正确解析
• 定义初始状态：通过initial属性设置默认无阴影状态，让鼠标离开时组件有明确的过渡还原目标，解决阴影残留问题
• 调整transition位置：将transition作为motion组件的独立属性传入，确保过渡逻辑覆盖初始态到悬停态的双向切换

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