我有一个父div和两个子div，当你将鼠标悬停在上面时，它会设置一个状态，同时也会改变不透明度，这样一个带有数字number的div会淡出，一个React图标会出现在它的位置上。这在昨天晚上还能用，但今天打开VSCode时，不知什么原因，它拒绝再工作了。
下面是代码：

<div className={`group w-full flex justify-between box-border items-center rounded-lg hover:bg-[#4c426e] cursor-pointer self-stretch min-w-0 h-[50px] p-0 mb-2 relative`} 
                                onMouseEnter={() => setHovered(true)}
                                onMouseLeave={() => setHovered(false)}>
                                <div className={`w-full text-[12px] min-w-[35px] max-w-[35px] text-left ml-2 self-center shrink text-lg text-[#989898] relative`}>
                                    <div className={`absolute top-0 left-0 w-full h-full flex items-center justify-center transition-all ease-in-out duration-300`}>
                                        <span className={`absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-${hovered ? '0' : '100'} transition-all ease-in-out duration-300`} >
                                            {number}
                                        </span>
                                        {hovered && <span className={`absolute bottom-0 left-0 w-full h-full flex items-center justify-center opacity-${hovered ? '100' : '0'} transition-all ease-in-out duration-300`} >
                                            <FaPlay onClick={() => handlePlay(title, artist)}/>
                                        </span>}
                                    </div>
                                </div>
                            </div>

有人能识别出这里出了什么问题吗，或者是山风安装只是突然变得奇怪了？