En el siguiente código, la transición se aplica durante el mouse-out después de pasar el mouse. ¿Cómo demoro la transición para el mouse-in en su lugar? ¿Debería usar algo más que hover?

 <div className='invisible group-hover:visible transition duration-200'> <div className="-mt-px flex divide-x divide-gray-200 "> <div className="w-0 flex-1 flex group-hover:transition delay-500"> <a href={`mailto:${person.email}`} className="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500" > <MailIcon className="w-5 h-5 text-gray-400" aria-hidden="true" /> <span className="ml-3">Email</span> </a> </div> <div className="-ml-px w-0 flex-1 flex group-hover:transition delay-500"> <a href={`tel:${person.telephone}`} className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500" > <PhoneIcon className="w-5 h-5 text-gray-400" aria-hidden="true" /> <span className="ml-3">Call</span> </a> </div> </div> </div>