0

In the below code the transition is being applied during mouse-out after hover. How do I delay the transition for mouse-in instead? should I be using anything other than 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>
risky last
  • 385
  • 4
  • 12
  • I don't know if I managed to reproduce, this is what I got when copied the code, https://www.loom.com/share/65a4deb5b5e64358b5d7aa820ab61be7 – Strazan Jun 26 '22 at 13:16
  • I don't see any problem since the hover effect should apply when mouse in. – saboshi69 Jun 29 '22 at 06:00

0 Answers0