tailwind css - 悬停时为另一个元素设置动画

Question

在使用 tailwind css 转换网站的过程中。我有一个元素，在悬停时为其子元素设置动画。我正在努力了解如何使用 tailwind css 来做到这一点。

这是使用基本 CSS 的代码

.cont:hover .hoverme{
  animation: hoverwave;
  animation-duration: .5s;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes hoverwave {
  0%{transform: scale(1,1);}
  100%{transform: scale(1.2,1.2);}
}

<!-- PROJECT1 START-->
<div class="cont overflow-hidden w-projmob mx-4 sm:w-projmob-md lg:w-projmob-xl opacity-90 cursor-pointer transition duration-300 mt-20 h-auto border-box bg-white rounded-lg shadow-lg hover:opacity-100">

////////////////

<div class="w-full h-20 absolute bottom-0 -left-5 z-20">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="width: 150%;" class="hoverme"><path fill="#fff" fill-opacity="1" d="M0,32L48,53.3C96,75,192,117,288,128C384,139,480,117,576,106.7C672,96,768,96,864,117.3C960,139,1056,181,1152,186.7C1248,192,1344,160,1392,144L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
</div>
</div>

///////////////

</div>
<!--PROJECT END-->

当悬停容器 .cont 时，类 .hoverme 会产生动画。

谢谢

Answer 1

像这样为悬停元素提供组类

<div class="group">
  <p class="group-hover:text-gray-900">afected element</p>
</div>

Answer 2

请参阅文档：

当您需要根据某些父元素的状态设置元素的样式时，请使用类标记父元素group，并使用group-*修饰符group->hover来设置目标元素的样式：

<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</a>

此模式适用于每个伪类修饰符，例如group-focus、group-active，甚至group-odd。

Answer 3

HOVERME与 CSS 类不同，hoverme CSS 类区分大小写。更改 CSS 或 HTML，使它们具有相同的大小写。