whileHover 效果在鼠标进入时起作用，但在鼠标离开后效果仍然存在（React、Framer Motion）

Question

我正在尝试使用滤镜：drop-shadow() 效果使鼠标悬停在某些图像上时从外部发光。目前，当我将鼠标悬停在图像上时会应用阴影，但在鼠标离开后它仍然存在。此外，当阴影立即出现时，过渡道具一定不能被识别（就好像它没有持续时间一样）。我确实使用初始、动画和过渡进行了设置，只是为了了解成帧器运动，并且在这种情况下持续时间工作得很好。

下面是我的代码

            <motion.img
                whileHover={{filter: 'drop-shadow(0 0 0.75rem rgb(255,255,255)', transition: {duration: 2}}}
                id='logo' src={g} 
                style={{width: '20%', height: '20%', position: 'relative', left: '103px'}}
            >
            </motion.img>

任何帮助表示赞赏！

Answer 1

我认为有两个问题。

1. 您应该关闭投影。

• 原样

whileHover={{filter: 'drop-shadow(0 0 0.75rem rgb(255,255,255)', transition: {duration: 2}}}

• 未来

whileHover={{filter: 'drop-shadow(0 0 0.75rem rgb(255,255,255))', transition: {duration: 2}}}

2. 如果选项 1 不起作用，请添加初始过滤器属性，如下所示。

initial={{ filter: 'drop-shadow(0 0 0rem rgba(255,255,255,0))' }}

希望有帮助。