Блог

Главная - Вопросы по программированию - Анимация наведения css группы Tailwind не работает

Анимация наведения css группы Tailwind не работает

#javascript #reactjs #tailwind-css #tailwind-in-js

Вопрос:

Я новичок в css tailwind. Анимация наведения в этом случае не работает. Когда кто-то наводит курсор на группу, я хочу, чтобы фон был анимирован, однако этого не происходит; вместо этого всегда отображается цвет фона.

 <li className=" text-gray  active:text-red group">
  <a href={`${href}`}>
    {name}
  </a>
  <div className="h-0.5 bg-red scale-x-0 group-hover:scale-100 transition-transform origin-left rounded-full duration-300 ease-out" />
</li>

Ответ №1:

Для того, чтобы ваша анимация работала, вы должны закрыть div и вставить в нее что-нибудь 😉 Например, вот так, используя ваш фрагмент кода, в данном случае. Подробнее об этом group-hover здесь

 <li className="text-gray active:text-red group">
  <a href={`${href}`}>{name}</a>
  <div className="h-0.5 bg-red scale-x-0 group-hover:scale-100 transition-transform origin-left rounded-full duration-300 ease-out">
    It works!
  </div>
</li>

Комментарии:

1. По-прежнему не работает

2. вы должны навести курсор на синюю точку, и это работает отлично.

3. Я использовал Next.js с помощью Tailwind Css для тестирования моего кода фрагмента ответа, и он работает нормально.

Метки: