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 上时，class .hoverme会有动画效果。

谢谢。

- jiml123

---

你好，能否请您一并包含您的HTML代码？谢谢。 - John

添加了，抱歉。 - jiml123

我猜我可能需要在tailwind.config.js中扩展一些内容...但不确定需要扩展什么。 - jiml123

嗨rounin...上面的代码完美地运行了。我正在寻找如何使用TAILWIND CSS编写此代码的答案。 - jiml123

非常抱歉 - 我原以为您展示的代码是一种 tailwind 的示例。我会退出了。对于无法提供更多帮助感到抱歉。 - Rounin

没问题，无论如何还是谢谢 :) - jiml123

Answer 1

将悬停元素分配到组类中，就像这样

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

- Rauche Acho

Answer 2

请查看文档：

When you need to style an element based on the state of some parent element, mark the parent with the group class, and use group-* modifiers like group->hover to style the target element:

<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>

This pattern works with every pseudo-class modifier, for example group-focus, group-active, or even group-odd.

- adijsad

Answer 3

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

- John

---

谢谢John，但是HOVERME是为了使这个类突出显示而添加的，但是我已经改变了。悬停效果正在工作，但我需要知道如何使用tailwind css实现它。 - jiml123