React项目PC端按钮及Hover效果失效，移动端正常求助

核心问题及修复步骤： #

1. 点击事件绑定错误
   当前onClick={navigate('/contactus')}会在组件渲染时立即执行跳转，而非点击按钮时触发。需改为箭头函数包裹：

   onClick={() => navigate('/contactus')}
   

2. Hover效果不生效（PC端）
   代码中使用了group-hover类，但父级<button>未添加group类，导致hover样式无法触发。给按钮加上group类：

   className='group w-[218px] h-[56px] relative inline-flex bg-[#FE6910] hover:bg-[#FE6910]/80 duration-300 justify-evenly items-center md:mt-[56px] mt-[20px]'
   

3. 绝对定位层拦截交互事件
   按钮内部的绝对定位模糊背景层会在PC端挡住按钮的点击和hover，需添加pointer-events-none让点击穿透到按钮；同时修正拼写错误transitiona-all为transition-all：

   className="absolute pointer-events-none transition-all duration-1000 opacity-70 -inset-px bg-gradient-to-r from-[#FE6910] via-[#FE6910] to-[#FE6910]/70 rounded-xl blur-lg group-hover:opacity-100 group-hover:-inset-1 group-hover:duration-200 animate-tilt"
   

修复后的完整代码： #

<div className='md:pl-0 pl-[20px]'>
    <button
        onClick={() => navigate('/contactus')}
        className='group w-[218px] h-[56px] relative inline-flex bg-[#FE6910] hover:bg-[#FE6910]/80 duration-300 justify-evenly items-center md:mt-[56px] mt-[20px]'>
        <div
            className="absolute pointer-events-none transition-all duration-1000 opacity-70 -inset-px bg-gradient-to-r from-[#FE6910] via-[#FE6910] to-[#FE6910]/70 rounded-xl blur-lg group-hover:opacity-100 group-hover:-inset-1 group-hover:duration-200 animate-tilt">
        </div>
        <div className='gap-[30px] relative inline-flex items-center justify-center font-bold text-white transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900'>
            <p className='text-[17px] font-roboto font-medium text-white '>Contact Us</p>
            <BsArrowRight size={30} className='text-white ' />
        </div>
    </button>
</div>

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